jsl-ui 9.18.3 → 9.19.0

package/lib/components/input/InputComponent.js

@@ -0,0 +1,144 @@
+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 { EventHandler } from "../../interaction/eventhandler";
+// tslint:disable-next-line: max-classes-per-file
+var InputComponent = /** @class */ (function () {
+    function InputComponent(options) {
+        var _a;
+        this.options = __assign({ type: "text", enabled: true, 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.options.onInput = EventHandler.Create(this.options.onInput);
+        if (this.options.type === "input") {
+            this.options.type = "text";
+        }
+    }
+    Object.defineProperty(InputComponent.prototype, "onChange", {
+        get: function () {
+            return this.options.onChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(InputComponent.prototype, "onInput", {
+        get: function () {
+            return this.options.onInput;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // public isEqual(node: IJSLComponent): boolean {
+    //     return (this as any).__proto__ === (node as any).__proto__;
+    // }
+    InputComponent.prototype.render = function () {
+        var _a;
+        var val = this.options.value;
+        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+            if (this.onInput.count() > 0) {
+                this.options.bindOnInput = true;
+            }
+            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]);
+            if (newVal !== current) {
+                val = newVal;
+                if (this.currentDom != null) {
+                    this.currentDom.value = val !== null && val !== void 0 ? val : "";
+                }
+            }
+        }
+        return {
+            tag: this.options.type !== "textarea" ? "input" : "textarea",
+            attr: {
+                type: this.options.type !== "textarea" ? this.options.type : undefined,
+                disabled: !this.options.enabled ? "disabled" : undefined,
+                class: this.options.class,
+                style: this.options.style,
+                change: this.raiseChangeEvent,
+                input: this.raiseInputEvent,
+                value: this.options.type !== "textarea" ? val : undefined,
+                placeholder: this.options.placeholder,
+                id: typeof this.options.id === "string" ? this.options.id : undefined,
+                maxLength: this.options.maxLength
+            },
+            content: this.options.type === "textarea" ? val : undefined
+        };
+    };
+    InputComponent.prototype.getValue = function () {
+        if (this.currentDom == null) {
+            return "";
+        }
+        return this.currentDom.value;
+    };
+    InputComponent.prototype.setValue = function (value) {
+        var _a;
+        if (this.currentDom != null) {
+            this.currentDom.value = value;
+        }
+        if (this.options.bindMode !== "fromModel" && 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;
+        }
+    };
+    InputComponent.prototype.onCreate = function (node) {
+        this.currentDom = node.dom;
+    };
+    // public onUpdate(node: IJSLVNode) {
+    //     this.currentDom = node.dom as HTMLInputElement;
+    //     if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+    //         if (this.onInput.count() > 0) {
+    //             this.options.bindOnInput = true;
+    //         }
+    //         const current = this.getValue();
+    //         const newVal = (this.options.converter?.toUI ?
+    //             this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+    //             this.options.bindTo[this.options.property]) as string;
+    //         if (newVal !== current) {
+    //             if (this.currentDom != null) {
+    //                 this.currentDom.value = newVal ?? "";
+    //             }
+    //         }
+    //     }
+    // }
+    InputComponent.prototype.raiseChangeEvent = function (e, node) {
+        var _a;
+        if (this.options.enabled) {
+            var value = node.dom.value;
+            if (this.options.bindMode !== "fromModel" && 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);
+        }
+    };
+    InputComponent.prototype.raiseInputEvent = function (e, node) {
+        var _a;
+        if (this.onInput.count() === 0) {
+            return false;
+        }
+        if (this.options.enabled) {
+            var value = node.dom.value;
+            if (this.options.bindOnInput && this.options.bindMode !== "fromModel" && 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.onInput.notify(value);
+        }
+    };
+    return InputComponent;
+}());
+export { InputComponent };

package/lib/components/loading/LoadingComponent.d.ts

@@ -0,0 +1,8 @@
+import "./LoadingStyle.css";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export declare class LoadingComponent implements IJSLComponent {
+    private sizeInRem?;
+    constructor(sizeInRem?: number);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+}

package/lib/components/loading/LoadingComponent.js

@@ -0,0 +1,22 @@
+import "./LoadingStyle.css";
+var LoadingComponent = /** @class */ (function () {
+    function LoadingComponent(sizeInRem) {
+        this.sizeInRem = sizeInRem;
+        if (sizeInRem == null) {
+            this.sizeInRem = 6;
+        }
+    }
+    LoadingComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    LoadingComponent.prototype.render = function () {
+        return {
+            tag: "div",
+            attr: { style: "font-size:" + this.sizeInRem + "rem" },
+            content: "<div class='lds-dual-ring'></div>",
+            raw: true
+        };
+    };
+    return LoadingComponent;
+}());
+export { LoadingComponent };

package/lib/components/loading/LoadingStyle.css

@@ -0,0 +1,29 @@
+.lds-dual-ring {
+  display: inline-block;
+  /* width: 80px;
+  height: 80px; */
+  width: 1em;
+  height: 1em;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 0.75em;
+  height: 0.75em;
+  margin: 0.2em;
+  /* width: 64px;
+  height: 64px;
+  margin: 8px; */
+  border-radius: 50%;
+  border: 0.08em solid #444444;
+  border-color: #444444 transparent #444444 transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/lib/components/navigation/NavigationComponent.d.ts

@@ -0,0 +1,34 @@
+import "./NavigationStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface INavItemChild {
+    content: string | IJSLVNode;
+    link?: string;
+    target?: string;
+    click?: (e: MouseEvent) => void;
+}
+export interface INavItem {
+    content: string | IJSLVNode;
+    link?: string;
+    target?: string;
+    children?: INavItemChild[];
+    click?: (e: MouseEvent) => void;
+}
+export interface INavigationOptions {
+    title: string | IJSLVNode;
+    titleLink?: string;
+    data: INavItem[];
+    style?: string;
+    class?: string;
+    position?: "default" | "static" | "fixed" | "fixed-bottom";
+    alignment?: "right" | "left";
+    id?: string;
+}
+export declare class NavigationComponent implements IJSLComponent {
+    private options;
+    constructor(options: INavigationOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private itemToNode;
+    private isActive;
+    private toNode;
+}

package/lib/components/navigation/NavigationComponent.js

@@ -0,0 +1,70 @@
+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);
+};
+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 "./NavigationStyle.scss";
+var NavigationComponent = /** @class */ (function () {
+    function NavigationComponent(options) {
+        this.options = __assign({ position: "fixed", id: "luxbar-checkbox", alignment: "left" }, options);
+    }
+    NavigationComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    NavigationComponent.prototype.render = function () {
+        var _this = this;
+        var _a, _b;
+        return {
+            tag: "header",
+            attr: { style: this.options.style, class: "nav-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
+            children: [
+                { tag: "div", attr: { class: "luxbar luxbar-" + this.options.position },
+                    children: [
+                        { tag: "input", attr: { type: "checkbox", class: "luxbar-checkbox", id: this.options.id } },
+                        { tag: "div", attr: { class: "luxbar-menu luxbar-menu-" + this.options.alignment + " luxbar-menu-light" },
+                            children: [{ tag: "ul", attr: { class: "luxbar-navigation" }, children: __spreadArray([
+                                        { tag: "li", attr: { class: "luxbar-header" }, children: [
+                                                { tag: "a", attr: { href: (_b = this.options.titleLink) !== null && _b !== void 0 ? _b : "#", class: "luxbar-brand" }, children: [this.toNode(this.options.title)] },
+                                                { tag: "label", attr: { class: "luxbar-hamburger luxbar-hamburger-spin", for: this.options.id },
+                                                    children: [{ tag: "span" }] },
+                                            ] }
+                                    ], this.options.data.map(function (x) { return _this.itemToNode(x); }), true) }] }
+                    ] }
+            ]
+        };
+    };
+    NavigationComponent.prototype.itemToNode = function (x) {
+        var _this = this;
+        var _a, _b, _c;
+        return { tag: "li", attr: { class: "luxbar-item" + (((_a = x.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? " dropdown" : "") + (this.isActive(x.link) ? " active" : "") }, children: [
+                { tag: "a", attr: { href: (_b = x.link) !== null && _b !== void 0 ? _b : "#", target: x.target, click: x.click }, children: [this.toNode(x.content)] },
+                (((_c = x.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ? { tag: "ul", children: x.children.map(function (c) { return _this.itemToNode(c); }) } : undefined)
+            ] };
+    };
+    NavigationComponent.prototype.isActive = function (link) {
+        return location.hash.startsWith(link);
+    };
+    NavigationComponent.prototype.toNode = function (content) {
+        if (typeof content === "string") {
+            return { tag: "span", content: content };
+        }
+        return content;
+    };
+    return NavigationComponent;
+}());
+export { NavigationComponent };

package/lib/components/navigation/NavigationStyle.scss

@@ -0,0 +1,226 @@
+.nav-comp {
+
+  line-height: 1.9rem;
+
+  .dropdown ul {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+
+.luxbar-default {
+    width: 100%;
+    position: relative;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    z-index: 1010; }
+  
+  .luxbar-static {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1010; }
+    .luxbar-static .luxbar-checkbox:checked ~ .luxbar-menu {
+      position: absolute; }
+  
+  .luxbar-fixed {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1010;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+  
+  .luxbar-fixed-bottom {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 1010;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+  
+  .luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
+    display: block;
+    height: 2px;
+    width: 26px;
+    transition: 0.6s ease; }
+  
+  .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
+    background-color: transparent; }
+    .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before, .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
+      margin-top: 0; }
+  
+  .luxbar-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    height: 58px; }
+  
+  .luxbar-menu-left .luxbar-navigation,
+  .luxbar-menu-left .luxbar-header {
+    justify-content: flex-start; }
+  
+  .luxbar-menu-right .luxbar-hamburger {
+    margin-left: auto; }
+  
+  .luxbar-brand {
+    font-size: 1.6em;
+    padding: 18px 24px 18px 24px; }
+  
+  .luxbar-menu {
+    min-height: 58px;
+    transition: 0.6s ease;
+    width: 100%; }
+  
+  .luxbar-navigation {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding-left: 0;
+    margin: 0; }
+  
+  .luxbar-menu a,
+  .luxbar-item a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer; }
+  
+  .luxbar-item {
+    height: 58px; }
+    .luxbar-item a {
+      padding: 18px 24px 18px 24px;
+      display: block; }
+  
+  .luxbar-hamburger {
+    padding: 18px 24px 18px 24px;
+    position: absolute;
+    right: 0;
+    cursor: pointer; }
+    .luxbar-hamburger span::before, .luxbar-hamburger span::after {
+      content: '';
+      position: absolute; }
+    .luxbar-hamburger span::before {
+      margin-top: -8px; }
+    .luxbar-hamburger span::after {
+      margin-top: 8px; }
+  
+  .luxbar-checkbox {
+    display: none; }
+    .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
+      overflow: hidden;
+      height: 58px; }
+    .luxbar-checkbox:checked ~ .luxbar-menu {
+      transition: height 0.6s ease;
+      height: 100vh;
+      overflow: auto; }
+  
+  .dropdown {
+    position: relative;
+    height: auto;
+    min-height: 58px;
+  }
+
+    .dropdown:hover > ul {
+      position: relative;
+      display: block;
+      min-width: 100%; }
+    .dropdown > a::after {
+      position: absolute;
+      content: '';
+      right: 10px;
+      top: 25px;
+      border-width: 5px 5px 0;
+      border-color: transparent;
+      border-style: solid; }
+    .dropdown > ul {
+      display: block;
+      overflow-x: hidden;
+      list-style: none;
+      padding: 0; }
+      .dropdown > ul .luxbar-item {
+        min-width: 100%;
+        height: 29px;
+        padding: 5px 10px 5px 40px; }
+        .dropdown > ul .luxbar-item a {
+          min-height: 29px;
+          line-height: 29px;
+          padding: 0; }
+  
+  @media screen and (min-width: 768px) {
+    .luxbar-navigation {
+      flex-flow: row;
+      justify-content: flex-end; }
+  
+    .luxbar-hamburger {
+      display: none; }
+  
+    .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
+      overflow: visible; }
+    .luxbar-checkbox:checked ~ .luxbar-menu {
+      height: 58px; }
+  
+    .luxbar-menu .luxbar-item {
+      border-top: 0; }
+  
+    .luxbar-menu-right .luxbar-header {
+      margin-right: auto; }
+  
+    .dropdown {
+      height: 58px; }
+      .dropdown:hover > ul {
+        position: absolute;
+        left: 0;
+        top: 58px;
+        padding: 0; }
+      .dropdown > ul {
+        display: none; }
+        .dropdown > ul .luxbar-item {
+          padding: 5px 10px; }
+          .dropdown > ul .luxbar-item a {
+            white-space: nowrap; } }
+  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::before {
+    transform: rotate(225deg); }
+  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::after {
+    transform: rotate(-225deg); }
+  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::before {
+    transform: rotate(45deg); }
+  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::after {
+    transform: rotate(-45deg); }
+  
+  .luxbar-menu-dark,
+  .luxbar-menu-dark .dropdown ul {
+    background-color: #212121;
+    color: #fff; }
+  
+  .luxbar-menu-dark .active,
+  .luxbar-menu-dark .luxbar-item:hover {
+    background-color: #424242; }
+  .luxbar-menu-dark .luxbar-hamburger span,
+  .luxbar-menu-dark .luxbar-hamburger span::before,
+  .luxbar-menu-dark .luxbar-hamburger span::after {
+    background-color: #fff; }
+  
+  .luxbar-menu-light {
+    background-color: #e0e0e0;
+    color: #212121;
+  }
+
+  .luxbar-menu-light .dropdown ul {
+    background-color: #ffffff;
+    color: #212121;
+    // border: 1px solid #e0e0e0;
+    box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.36);
+    li:not(:last-child) {
+      border-bottom: 1px solid #e0e0e0;
+    }
+  }
+  
+  .luxbar-menu-light .active,
+  .luxbar-menu-light .luxbar-item:hover {
+    background-color: #bdbdbd; }
+  .luxbar-menu-light .luxbar-hamburger span,
+  .luxbar-menu-light .luxbar-hamburger span::before,
+  .luxbar-menu-light .luxbar-hamburger span::after {
+    background-color: #212121; }
+  }

package/lib/components/notification/Notification.d.ts

@@ -0,0 +1,17 @@
+import "./Notification.scss";
+import { IJSLVNode, IJSLComponent } from "jsl-render";
+export interface INotificationOptions {
+    content: string | IJSLVNode | IJSLComponent;
+    closeOnClick?: boolean;
+    timeOut?: number;
+    class?: string;
+    style?: string;
+}
+export declare class Notification {
+    static show(options: INotificationOptions): void;
+    static clearAll(): void;
+    private static container;
+    private static containerVNode;
+    private static renderer;
+    private static createContainer;
+}

package/lib/components/notification/Notification.js

@@ -0,0 +1,56 @@
+import "./Notification.scss";
+import { JSLRender } from "jsl-render";
+import { helper } from "../../core/helper";
+var Notification = /** @class */ (function () {
+    function Notification() {
+    }
+    Notification.show = function (options) {
+        var _a;
+        if (Notification.container == null) {
+            Notification.createContainer();
+        }
+        // add
+        var notification = {
+            tag: "div",
+            attr: { id: helper.newDomGuid(), style: options.style, class: "jsl-notification " + (options.class || "") },
+            animation: { attr: "opacity", from: 0, to: 1, duration: 600 },
+            children: [
+                typeof options.content === "string" ? { tag: "div", content: options.content } : options.content
+            ]
+        };
+        Notification.containerVNode.children.push(notification);
+        Notification.renderer.refresh();
+        // remove
+        if (options.timeOut) {
+            setTimeout(function () {
+                var idx = Notification.containerVNode.children.indexOf(notification);
+                if (idx >= 0) {
+                    Notification.containerVNode.children.splice(idx, 1);
+                }
+                Notification.renderer.refresh();
+            }, options.timeOut);
+        }
+        if (((_a = options.closeOnClick) !== null && _a !== void 0 ? _a : true) === true) {
+            notification.attr.click = function () {
+                var idx = Notification.containerVNode.children.indexOf(notification);
+                if (idx >= 0) {
+                    Notification.containerVNode.children.splice(idx, 1);
+                }
+            };
+        }
+    };
+    Notification.clearAll = function () {
+        Notification.containerVNode.children = [];
+        Notification.renderer.refresh();
+    };
+    Notification.createContainer = function () {
+        Notification.container = document.createElement("div");
+        document.body.appendChild(Notification.container);
+        Notification.container.className = "jsl-notification-container";
+        Notification.containerVNode = { tag: "div", children: [] };
+        Notification.renderer = new JSLRender(Notification.container, false);
+        Notification.renderer.render(Notification.containerVNode);
+    };
+    return Notification;
+}());
+export { Notification };

package/lib/components/notification/Notification.scss

@@ -0,0 +1,19 @@
+.jsl-notification-container {
+    position: fixed;
+    top: 1px;
+    right: 1px;
+    overflow: visible;
+    z-index: 3020;
+
+    .jsl-notification {
+        box-sizing: border-box;
+        padding: 0.5rem;
+        min-width: 12rem;
+        border-radius: 0.3rem;
+        // border: 1px solid silver;
+        color: white;
+        background: #3B99FF;
+        margin: 0.2rem;
+        cursor: pointer;
+    }
+}

package/lib/components/number/NumberComponent.d.ts

@@ -0,0 +1,25 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { INumberInputOptions } from "../../ui/number.input";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface INumberComponentOptions<T = any> extends INumberInputOptions {
+    id?: string;
+    class?: string;
+    style?: string;
+    placeholder?: string;
+    bindTo?: T;
+    bindMode?: "toModel" | "fromModel" | "both";
+    property?: keyof T;
+    converter?: IDataConverter<any, number>;
+}
+export declare class NumberComponent<T = any> implements IJSLComponent {
+    private currentDom;
+    private id;
+    private options;
+    constructor(options: INumberComponentOptions<T>);
+    get onChange(): EventHandler<number>;
+    render(): IJSLVNode;
+    getValue(): string;
+    getValueAsNumber(): number;
+    onCreate(node: IJSLVNode): void;
+}