jsl-ui 9.18.2 → 9.18.3

package/lib/components/time/TimeComponent.js

@@ -1,113 +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 "./TimeComponent.scss";
-import { EventHandler } from "../../interaction/eventhandler";
-import { helper } from "../../core/helper";
-import { date } from "../../core/date";
-var TimeComponent = /** @class */ (function () {
-    function TimeComponent(options) {
-        var _a;
-        this.options = __assign({
-            enabled: true,
-            id: helper.newDomGuid(),
-            inputMode: "HourMinute",
-            bindMode: "toModel",
-            placeholder: (options === null || options === void 0 ? void 0 : options.inputMode) === "HourMinuteSecond" ? "__:__:__" : "__:__"
-        }, options);
-        if (this.options.bindTo != null && this.options.bindMode !== "fromModel" && 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);
-    }
-    TimeComponent.prototype.render = function () {
-        var _a, _b;
-        var val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            var current = this.getValue();
-            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-            var newValStr = date.formatTime(newVal, this.options.inputMode);
-            if (newValStr !== current) {
-                val = newVal;
-                if (this.currentDom != null) {
-                    this.currentDom.value = newValStr;
-                }
-            }
-        }
-        return {
-            tag: "input", attr: {
-                id: this.options.id,
-                enabled: this.options.enabled,
-                value: date.formatTime(val, this.options.inputMode),
-                class: "time-comp " + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
-                style: this.options.style,
-                placeholder: this.options.placeholder,
-                change: this.raiseChangeEvent
-            }
-        };
-    };
-    TimeComponent.prototype.onCreate = function (node) {
-        this.currentDom = node.dom;
-    };
-    TimeComponent.prototype.onUpdate = function (node) {
-        this.currentDom = node.dom;
-    };
-    TimeComponent.prototype.getValue = function () {
-        if (this.currentDom == null) {
-            return "";
-        }
-        return this.currentDom.value;
-    };
-    TimeComponent.prototype.getValueAsDate = function (datePart) {
-        var x = datePart ? new Date(datePart.getTime()) : new Date();
-        try {
-            var parts = this.getValue().split(":");
-            x.setHours(parseInt(parts[0], 10));
-            if (parts.length > 1) {
-                x.setMinutes(parseInt(parts[1], 10));
-            }
-            else {
-                x.setMinutes(0);
-            }
-            if (this.options.inputMode === "HourMinuteSecond" && parts.length > 2) {
-                x.setSeconds(parseInt(parts[2], 10));
-            }
-            else {
-                x.setSeconds(0);
-            }
-        }
-        catch (e) {
-            console.log(e);
-            this.currentDom.value = "";
-            x.setHours(0);
-            x.setMinutes(0);
-            x.setSeconds(0);
-        }
-        return x;
-    };
-    TimeComponent.prototype.raiseChangeEvent = function (e, node) {
-        var _a;
-        if (this.options.enabled) {
-            var val = this.getValueAsDate(this.options.value);
-            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
-                this.options.bindTo[this.options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
-            }
-            this.options.onChange.notify(val);
-        }
-    };
-    return TimeComponent;
-}());
-export { TimeComponent };

package/lib/components/time/TimeComponent.scss

@@ -1,4 +0,0 @@
-.time-comp {
-    width: 4em;
-    text-align: right;
-}

package/lib/components/tree-view/TreeViewComponent.d.ts

@@ -1,23 +0,0 @@
-import "./TreeViewStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface ITreeViewComponentOptions {
-    data: ITreeViewChild;
-    renderItem?: (data: any) => IJSLVNode;
-    style?: string;
-    class?: string;
-}
-export interface ITreeViewChild {
-    id: string;
-    content: IJSLVNode | string;
-    children?: ITreeViewChild[];
-    collapsed?: boolean;
-}
-export declare class TreeViewComponent implements IJSLComponent {
-    private options;
-    private filteredData;
-    constructor(options: ITreeViewComponentOptions);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-    private renderNode;
-    private addChild;
-}

package/lib/components/tree-view/TreeViewComponent.js

@@ -1,45 +0,0 @@
-import "./TreeViewStyle.scss";
-var TreeViewComponent = /** @class */ (function () {
-    function TreeViewComponent(options) {
-        this.options = options;
-    }
-    TreeViewComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    TreeViewComponent.prototype.render = function () {
-        var _a, _b;
-        return {
-            tag: "div", attr: { style: this.options.style, class: "treeview-comp hover " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") }, children: [
-                { tag: "ul", attr: { class: "tv-ul" }, children: [this.renderNode((_b = this.filteredData) !== null && _b !== void 0 ? _b : this.options.data)] }
-            ]
-        };
-    };
-    TreeViewComponent.prototype.renderNode = function (el) {
-        var _this = this;
-        function getInput() {
-            var res = { tag: "input", attr: { class: "tv-input", type: "checkbox", id: el.id } };
-            if (el.collapsed) {
-                res.attr.checked = "checked";
-            }
-            return res;
-        }
-        return (el.children && el.children.length > 0) ?
-            { tag: "li", children: [
-                    getInput(),
-                    this.addChild({ tag: "label", attr: { for: el.id } }, this.options.renderItem != null ? this.options.renderItem(el) : el.content),
-                    { tag: "ul", attr: { class: "tv-ul" }, children: el.children.map(function (c) { return _this.renderNode(c); }) }
-                ] } :
-            this.addChild({ tag: "li" }, this.options.renderItem != null ? this.options.renderItem(el) : el.content);
-    };
-    TreeViewComponent.prototype.addChild = function (parent, content) {
-        if (typeof content === "string") {
-            parent.content = content;
-        }
-        else {
-            parent.children = [content];
-        }
-        return parent;
-    };
-    return TreeViewComponent;
-}());
-export { TreeViewComponent };

package/lib/components/tree-view/TreeViewStyle.scss

@@ -1,96 +0,0 @@
-
-$defaultColor: rgba(50,50,50, 0.5);
-// $hoverColor: #3B99FF;
-
-// @mixin transition-duration($duration: 1s){
-//   -webkit-transition-duration: $duration;
-//   -moz-transition-duration: $duration;
-//   -ms-transition-duration: $duration;
-//   -o-transition-duration: $duration;
-//   transition-duration: $duration;
-// }
-
-// @mixin transition-property($property){
-//   -webkit-transition-property: $property;
-//   -moz-transition-property: $property;
-//   -ms-transition-property: $property;
-//   -o-transition-property: $property;
-//   transition-property: $property;
-// }
-
-// @mixin user-select($select: none){
-//   -webkit-user-select: $select;
-//   -moz-user-select: $select;
-//   -ms-user-select: $select;
-//   -o-user-select: $select;
-//   user-select: $select;
-// }
-
-.treeview-comp {
-  // float: left;
-  // @include user-select;
-
-  // &:hover input ~ label:before,
-  // &.hover input ~ label:before{
-  //   opacity: 1.0;
-  //   @include transition-duration(0.5s);
-  // }
-  
-  .tv-ul {
-    // @include transition-duration;
-    list-style: none;
-    padding-left: 1em;
-    
-    // li {
-    //   span{
-    //     @include transition-property(color);
-    //     @include transition-duration;
-      
-    //     &:hover {
-    //       color: $hoverColor;
-    //       @include transition-duration(0.3s);
-    //     }
-    //   }
-    // }
-  }
-  
-  .tv-input{
-    display: none;
-    
-    &:checked ~ ul {
-      display: none;
-    }
-    
-    & ~ label {
-      cursor: pointer;
-      position: relative;
-    }
-    
-    & ~ label:before {
-      content: '';
-      width: 0;
-      height: 0;
-      position: absolute;
-      margin-left: -1em;
-      margin-top: 0.4em;
-      border-width: 4px;
-      border-style: solid;
-      border-top-color: transparent;
-      border-right-color: $defaultColor;
-      border-bottom-color: $defaultColor;
-      border-left-color: transparent;
-      // opacity: 0.0;
-      // @include transition-property(opacity);
-      // @include transition-duration;
-    }
-
-    &:checked ~ label:before {
-      margin-left: -0.8em;
-      border-width: 5px;
-      border-top-color: transparent;
-      border-right-color: transparent;
-      border-bottom-color: transparent;
-      border-left-color: $defaultColor;
-    }
-  }
-}

package/lib/components/virtual-render/VirtualRenderComponent.d.ts

@@ -1,30 +0,0 @@
-import "./VirtualRenderStyle.scss";
-import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
-export interface IVirtualArg {
-    index: number;
-    rowData: any;
-    container: IJSLVNode;
-}
-export interface IVirtualRenderOptions {
-    data: any[];
-    renderRow: (args: IVirtualArg) => string | IJSLVNode | IJSLComponent | void;
-    rowHeight?: number;
-    rowTag?: string;
-    bufferSizeInPx?: number;
-    viewportSizeInPX?: number;
-    class?: string;
-    style?: string;
-}
-export declare class VirtualRenderComponent implements IJSLComponent {
-    State: {
-        scrollPos: number;
-        renderer?: JSLRender;
-    };
-    private options;
-    constructor(options: IVirtualRenderOptions);
-    isEqual(node: IJSLComponent): boolean;
-    setData(data: any[]): void;
-    onInit(renderer: JSLRender): void;
-    render(): IJSLVNode;
-    private getChildren;
-}

package/lib/components/virtual-render/VirtualRenderComponent.js

@@ -1,104 +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 "./VirtualRenderStyle.scss";
-var VirtualRenderComponent = /** @class */ (function () {
-    function VirtualRenderComponent(options) {
-        this.State = { scrollPos: 0 };
-        var defaultOptions = {
-            data: null,
-            renderRow: null,
-            bufferSizeInPx: 200,
-            rowHeight: 20,
-            rowTag: "div",
-            viewportSizeInPX: window.innerHeight
-        };
-        this.options = __assign(__assign({}, defaultOptions), options);
-    }
-    VirtualRenderComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    VirtualRenderComponent.prototype.setData = function (data) {
-        this.options.data = data;
-    };
-    VirtualRenderComponent.prototype.onInit = function (renderer) {
-        this.State.renderer = renderer;
-    };
-    VirtualRenderComponent.prototype.render = function () {
-        var _this = this;
-        var _a, _b;
-        var o = this.options;
-        var vrBody = {
-            tag: "div",
-            attr: { class: "v-r-child", style: "height:" + (o.data.length * o.rowHeight) + "px;position:relative" },
-            children: this.getChildren()
-        };
-        var vrContainer = {
-            tag: "div", attr: {
-                class: "v-r-comp " + ((_a = o.class) !== null && _a !== void 0 ? _a : ""),
-                style: "overflow-y:auto;" + ((_b = o.style) !== null && _b !== void 0 ? _b : ""),
-                scroll: function (e, node) {
-                    var newScrollPos = node.dom.scrollTop;
-                    if (Math.abs(_this.State.scrollPos - newScrollPos) < o.bufferSizeInPx) {
-                        return false;
-                    }
-                    _this.State.scrollPos = newScrollPos;
-                    vrBody.children = _this.getChildren();
-                    node.children[0].children = [{ tag: "dummy" }];
-                    _this.State.renderer.updateNode(node.children[0], vrBody);
-                    return false;
-                }
-            }, children: [vrBody]
-        };
-        return vrContainer;
-    };
-    // public scrollRowToTop(idx: number) {
-    // }
-    // public scrollRowToCenter(idx: number) {
-    // }
-    // public scrollRowToBottom(idx: number) {
-    // }
-    VirtualRenderComponent.prototype.getChildren = function () {
-        var o = this.options;
-        var children = [];
-        var viewport = {
-            top: Math.floor((this.State.scrollPos - o.bufferSizeInPx) / o.rowHeight),
-            bottom: Math.ceil((this.State.scrollPos + o.viewportSizeInPX + o.bufferSizeInPx) / o.rowHeight)
-        };
-        for (var idx = viewport.top; idx < viewport.bottom; idx++) {
-            if (idx < 0 || idx >= o.data.length) {
-                continue;
-            }
-            var node = {
-                tag: o.rowTag, attr: {
-                    style: {
-                        top: (idx * o.rowHeight) + "px",
-                        height: o.rowHeight + "px",
-                        position: "absolute",
-                        left: "0",
-                        right: "0"
-                    }
-                }, children: []
-            };
-            var result = o.renderRow({ index: idx, container: node, rowData: o.data[idx] });
-            if (typeof result === "string") {
-                node.content = result;
-            }
-            else if (result != null) {
-                node.children.push(result);
-            }
-            children.push(node);
-        }
-        return children;
-    };
-    return VirtualRenderComponent;
-}());
-export { VirtualRenderComponent };

package/lib/components/virtual-render/VirtualRenderStyle.scss

@@ -1,9 +0,0 @@
-.v-r-comp {
-
-    height:100%;
-
-    .v-r-child > * {
-        height: 100%;
-    }
-
-}

package/lib/core/culture.d.ts

@@ -1,5 +0,0 @@
-declare let culture: any;
-/**
- * culture info for date and number formatting and parsing
- */
-export default culture;