jsl-ui 9.18.3 → 9.18.4

package/lib/components/expander/ExpanderComponent.js

@@ -0,0 +1,90 @@
+import "./ExpanderStyle.scss";
+var ExpanderComponent = /** @class */ (function () {
+    function ExpanderComponent(optionsOrHeader, body, expanded) {
+        var _a;
+        this.State = { expanded: false, waitingForAnimation: false };
+        if (body != null) {
+            // old syntax
+            this.options = { header: optionsOrHeader, body: body, expanded: expanded !== null && expanded !== void 0 ? expanded : true };
+        }
+        else {
+            this.options = optionsOrHeader;
+            this.options.expanded = (_a = this.options.expanded) !== null && _a !== void 0 ? _a : true;
+        }
+        this.State.expanded = this.options.expanded;
+    }
+    ExpanderComponent.prototype.getIcon = function (expanded) {
+        var _a, _b, _c, _d;
+        return {
+            tag: "span", attr: {
+                class: "expand-collapse-icon", style: "padding:0 0.2rem 0 0.2rem;"
+            },
+            raw: true,
+            content: "<svg style='" +
+                "min-width:" + ((_a = this.options.iconSize) !== null && _a !== void 0 ? _a : "1.5rem") + "; min-height:" + ((_b = this.options.iconSize) !== null && _b !== void 0 ? _b : "1.5rem") +
+                ";max-width:" + ((_c = this.options.iconSize) !== null && _c !== void 0 ? _c : "1.5rem") + "; max-height:" + ((_d = this.options.iconSize) !== null && _d !== void 0 ? _d : "1.5rem") + ";' " +
+                "xml:space='preserve' width='1024px' height='1024px' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='nonzero' clip-rule='evenodd' viewBox='0 0 10240 10240'>" +
+                (expanded
+                    ? "<path id='curve0' fill='#FFFFFF' d='M1273 3989l3621 3620c124,125 328,125 452,0l3621 -3620c124,-125 124,-328 0,-453l-905 -905c-125,-125 -328,-125 -453,0l-2489 2489 -2489 -2489c-125,-125 -328,-125 -453,0l-905 905c-124,125 -124,328 0,453z'/>"
+                    : "<path id='curve0' fill='#FFFFFF' d='M3989 1273l3620 3621c125,124 125,328 0,452l-3620 3621c-125,124 -328,124 -453,0l-905 -905c-125,-125 -125,-328 0,-453l2489 -2489 -2489 -2489c-125,-125 -125,-328 0,-453l905 -905c125,-124 328,-124 453,0z'/>") +
+                "</svg>"
+        };
+    };
+    ExpanderComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    ExpanderComponent.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c;
+        var animate = this.State.waitingForAnimation;
+        this.State.waitingForAnimation = false;
+        return {
+            tag: "div", attr: { class: "expander-comp " + (this.options.class || ""), style: (_a = this.options.style) !== null && _a !== void 0 ? _a : "" }, children: [
+                {
+                    tag: "div", attr: {
+                        class: "header",
+                        click: function (evt) { var _a; if ((_a = _this.options.isToggleOnHeader) !== null && _a !== void 0 ? _a : true) {
+                            evt.stopPropagation();
+                            _this.toggleExpand();
+                        } },
+                    },
+                    children: [
+                        {
+                            tag: "span", attr: { class: "toggler", click: function (evt) { evt.stopPropagation(); _this.toggleExpand(); } },
+                            children: [this.State.expanded
+                                    ? ((_b = this.options.expandedIcon) !== null && _b !== void 0 ? _b : this.getIcon(true))
+                                    : ((_c = this.options.collapsedIcon) !== null && _c !== void 0 ? _c : this.getIcon(false))
+                            ]
+                        },
+                        { tag: "span", attr: { class: "content" }, children: [this.toNode(this.options.header)] }
+                    ]
+                },
+                {
+                    tag: "div", attr: { class: "body", style: this.State.expanded ? undefined : { display: "none" } },
+                    animation: (animate ? { attr: "opacity", from: "0", to: "1", duration: 500 } : undefined),
+                    children: [this.toNode(this.options.body)]
+                }
+            ]
+        };
+    };
+    ExpanderComponent.prototype.toggleExpand = function () {
+        var newVal = !this.State.expanded;
+        if (this.options.onToggle != null) {
+            if (this.options.onToggle(newVal) === false) {
+                return;
+            }
+        }
+        if (newVal) {
+            this.State.waitingForAnimation = true;
+        }
+        this.State.expanded = newVal;
+    };
+    ExpanderComponent.prototype.toNode = function (content) {
+        if (typeof content === "string") {
+            return { tag: "div", content: content };
+        }
+        return content;
+    };
+    return ExpanderComponent;
+}());
+export { ExpanderComponent };

package/lib/components/expander/ExpanderStyle.scss

@@ -0,0 +1,47 @@
+.expander-comp {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
+    .header {
+        background: #3B99FF;
+        color: #fff;
+        border-radius: 0.3rem;
+        display: flex;
+        align-content: center;
+        min-height: 1.5rem;
+        line-height: 1.5rem;
+        align-items: center;
+
+        .toggler {
+            border-top-left-radius: 0.3rem;
+            border-bottom-left-radius: 0.3rem;
+            cursor: pointer;
+            display: inline-block;
+            background: #3B99FF;
+            
+            &:hover {
+                background: #6bb1fc;
+                color: black;
+            }
+        }
+
+        .content {
+            border-top-right-radius: 0.3rem;
+            border-bottom-right-radius: 0.3rem;
+            cursor: pointer;
+            display: inline-block;
+            flex-grow: 1;
+            padding-left: 0.6em;
+        }
+        
+            
+        &:hover {
+            background: #6bb1fc;
+            color: black;
+        }
+    }
+    .expand-collapse-icon {
+        top: 0.2rem;
+        color: #fff;
+        opacity: 0.8;
+        padding:0 0.2rem 0 0.2rem;
+    }
+}

package/lib/components/expander/OldExpanderStyle.scss

@@ -0,0 +1,37 @@
+.expander-comp {
+
+    margin: 1rem;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
+
+    .header {
+        position: relative;
+        padding: 0.5rem;
+        padding-left: 1.6rem;
+        border-bottom: 2px solid #cccccc;
+        cursor: pointer;
+        background: #3B99FF;
+        color: white;
+        font-weight: bold;
+    }
+
+    .body {
+        padding: 0.5rem;
+    }
+
+    .expand-collapse-icon {
+        position: absolute;
+        left: 0.2rem;
+        top: 0.4rem;
+        font-size: 0.9rem;
+        box-sizing: border-box;
+        padding: 0.1rem;
+        opacity: 0.6;
+        font-weight: bold;
+        color: black;
+    }
+
+    .header:hover .expand-collapse-icon {
+        opacity: 1;
+    }
+
+}

package/lib/components/form-field/FormComponent.d.ts

@@ -0,0 +1,12 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IFormComponentOptions {
+    class?: string;
+    style?: string;
+}
+export declare class FormComponent implements IJSLComponent {
+    private children;
+    private options?;
+    constructor(children: Array<IJSLVNode | IJSLComponent>, options?: IFormComponentOptions);
+    render(): IJSLVNode;
+    validate(): boolean;
+}

package/lib/components/form-field/FormComponent.js

@@ -0,0 +1,26 @@
+var FormComponent = /** @class */ (function () {
+    function FormComponent(children, options) {
+        this.children = children;
+        this.options = options;
+    }
+    FormComponent.prototype.render = function () {
+        var _a, _b;
+        return {
+            tag: "form",
+            attr: { class: (_a = this.options) === null || _a === void 0 ? void 0 : _a.class, style: (_b = this.options) === null || _b === void 0 ? void 0 : _b.style },
+            children: this.children
+        };
+    };
+    FormComponent.prototype.validate = function () {
+        var valid = true;
+        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
+            var c = _a[_i];
+            if (c.validate && !c.validate()) {
+                valid = false;
+            }
+        }
+        return valid;
+    };
+    return FormComponent;
+}());
+export { FormComponent };

package/lib/components/form-field/FormFieldComponent.d.ts

@@ -0,0 +1,38 @@
+import "./FormFieldStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDatePickerOptions } from "../../ui/date.picker";
+import { INumberInputOptions } from "../../ui/number.input";
+import { IAutoSuggestOptions } from "../../ui/auto.suggest";
+export interface IFormFieldOptions {
+    id?: string;
+    label: string;
+    type?: "text" | "password" | "date" | "number" | "autosuggest";
+    dateOptions?: IDatePickerOptions;
+    numberOptions?: INumberInputOptions;
+    autoSuggestOptions?: IAutoSuggestOptions;
+    value?: string;
+    maxLength?: number;
+    class?: string;
+    required?: boolean;
+    onValidate?: (val: string) => boolean | string;
+    onBlur?: (evt: any, input: IJSLVNode) => void;
+    onFocus?: (evt: any, input: IJSLVNode) => void;
+    onInput?: (evt: any, input: IJSLVNode) => void;
+}
+export declare class FormFieldComponent implements IJSLComponent {
+    private options;
+    private id;
+    private type;
+    private datepickerRef;
+    private validationMessage;
+    constructor(options: IFormFieldOptions);
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    onRemove(node: IJSLVNode): void;
+    validate(): boolean;
+    getValue(): string;
+    setValue(value: string): void;
+    private setInActive;
+    private setActive;
+    private onInput;
+}

package/lib/components/form-field/FormFieldComponent.js

@@ -0,0 +1,139 @@
+import "./FormFieldStyle.scss";
+import { DatePicker } from "../../ui/date.picker";
+import { NumberInput } from "../../ui/number.input";
+import { helper } from "../../core/helper";
+import { AutoSuggest } from "../../ui/auto.suggest";
+var FormFieldComponent = /** @class */ (function () {
+    function FormFieldComponent(options) {
+        this.options = options;
+        this.id = options.id || helper.newDomGuid();
+        this.type = this.options.type === "password" ? "password" : "text";
+    }
+    FormFieldComponent.prototype.render = function () {
+        var _a, _b;
+        return {
+            tag: "div",
+            attr: { class: "form-field " + (this.options.value ? "form-field--is-filled " : "") + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
+            children: [{
+                    tag: "div",
+                    attr: { class: "form-field__control" + (this.validationMessage ? " failed__valid" : "") },
+                    children: [
+                        {
+                            tag: "label",
+                            attr: { for: this.id, class: "form-field__label" },
+                            content: this.options.label +
+                                (this.options.required ? " *" : "") +
+                                (this.validationMessage ? (" " + ((_b = this.validationMessage) !== null && _b !== void 0 ? _b : "")) : "")
+                        },
+                        {
+                            tag: "input",
+                            attr: {
+                                id: this.id,
+                                type: this.type,
+                                value: this.options.value,
+                                maxLength: this.options.maxLength,
+                                class: "form-field__input",
+                                blur: this.setInActive,
+                                focus: this.setActive,
+                                input: this.onInput
+                            }
+                        }
+                    ]
+                }]
+        };
+    };
+    FormFieldComponent.prototype.onCreate = function (node) {
+        var InputDom = node.dom.firstElementChild.children[1];
+        if (this.options.type === "number") {
+            NumberInput(InputDom, this.options.numberOptions);
+        }
+        else if (this.options.type === "date") {
+            this.datepickerRef = DatePicker(InputDom, this.options.dateOptions);
+        }
+        else if (this.options.type === "autosuggest") {
+            AutoSuggest(InputDom, this.options.autoSuggestOptions);
+        }
+    };
+    FormFieldComponent.prototype.onRemove = function (node) {
+        if (this.datepickerRef != null) {
+            this.datepickerRef.destroy();
+        }
+    };
+    FormFieldComponent.prototype.validate = function () {
+        var value = this.getValue();
+        if (this.options.required && !value) {
+            this.validationMessage = " ";
+            return false;
+        }
+        if (this.options.onValidate) {
+            var validationResult = this.options.onValidate(value);
+            if (validationResult === false) {
+                this.validationMessage = " ";
+                return false;
+            }
+            if (validationResult !== true) {
+                this.validationMessage = validationResult;
+                return false;
+            }
+        }
+        this.validationMessage = null;
+        return true;
+    };
+    FormFieldComponent.prototype.getValue = function () {
+        var _a;
+        return (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.value;
+    };
+    FormFieldComponent.prototype.setValue = function (value) {
+        var el = document.getElementById(this.id);
+        if (el == null) {
+            return;
+        }
+        el.value = value || "";
+        if (value) {
+            el.parentElement.classList.add("form-field--is-filled");
+        }
+        else {
+            el.parentElement.classList.remove("form-field--is-filled");
+        }
+    };
+    FormFieldComponent.prototype.setInActive = function (evt, node) {
+        var formField = node.dom.parentElement.parentElement;
+        if (formField == null) {
+            return;
+        }
+        setTimeout(function () {
+            formField.classList.remove("form-field--is-active");
+            if (node.dom.value === "") {
+                formField.classList.remove("form-field--is-filled");
+            }
+            else {
+                formField.classList.add("form-field--is-filled");
+            }
+        }, 250);
+        if (this.options.onBlur) {
+            this.options.onBlur(evt, node);
+            return;
+        }
+        return false;
+    };
+    FormFieldComponent.prototype.setActive = function (evt, node) {
+        var formField = node.dom.parentElement.parentElement;
+        if (formField == null) {
+            return;
+        }
+        formField.classList.add("form-field--is-active");
+        if (this.options.onFocus) {
+            this.options.onFocus(evt, node);
+            return;
+        }
+        return false;
+    };
+    FormFieldComponent.prototype.onInput = function (evt, node) {
+        if (this.options.onInput) {
+            this.options.onInput(evt, node);
+            return;
+        }
+    };
+    return FormFieldComponent;
+}());
+export { FormFieldComponent };

package/lib/components/form-field/FormFieldStyle.scss

@@ -0,0 +1,87 @@
+
+$primary-color: #3B99FF;
+$animation-duration: 0.4s;
+
+@mixin label-active() {
+  font-size: 0.7em;
+  transform: translateY(-14px);
+}
+
+.form-field {
+  display: block;
+  margin-bottom: 16px;
+
+  .failed__valid {
+    .form-field__input {
+      border-color: #cc0000!important;
+    }
+    .form-field__label {
+      color: #aa0000!important;
+    }
+  }
+  
+  &--is-active {
+    .form-field__control {
+      &::after {
+        border-bottom: 2px solid $primary-color;
+        transform: scaleX(150);
+      }
+    }
+    .form-field__label {
+      color: $primary-color;
+      @include label-active();
+    }
+  }
+  &--is-filled {
+    .form-field__label {
+      @include label-active();
+    }
+  }
+}
+.form-field__label {
+  color:#606060;
+  display: block;
+  font-weight: normal;
+  left: 0;
+  margin: 0;
+  padding: 1rem 0.5rem 0 ;
+  position: absolute;
+  top: 0;
+  transition: all $animation-duration;
+  width: 100%;
+}
+.form-field__control {
+  background: #f6f6f6;
+  border-radius: 0.3rem 0.3rem 0 0;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  
+  &::after {
+    border-bottom: 2px solid $primary-color;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    margin: 0 auto;
+    position: absolute;
+    right: 0;
+    transform: scaleX(0);
+    transition: all $animation-duration;
+    width: 1%;
+  }
+}
+.form-field__input,
+.form-field__textarea {
+  box-sizing: border-box;
+  border:none;
+  appearance: none;
+  background: transparent;
+  border-bottom: 1px solid #999;
+  color: #333;
+  display: block;
+  margin-top: 1.3rem;
+  outline: 0;
+  padding: 0 0.3rem 0.2rem 0.3rem;
+  width: 100%;
+}

package/lib/components/grid/GridComponent.d.ts

@@ -0,0 +1,26 @@
+import { ISlickColumn } from "../../grid/slick.core";
+import { ISlickCreatorOptions, IJSLGrid } from "../../grid/slick.creator";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export declare class GridComponent<T> implements IJSLComponent {
+    private data;
+    private columns;
+    private options;
+    private gridRef;
+    private ref;
+    private refResolver;
+    private currentlyVisible;
+    private checkVisibleTimeout;
+    private rootTag;
+    private initEventsFnc;
+    constructor(data: Promise<T[]> | T[], columns: ISlickColumn[], options: ISlickCreatorOptions, height?: string);
+    getRootTag(): IJSLVNode;
+    getRef(): Promise<IJSLGrid<T>>;
+    initEvents(fnc: (grid: IJSLGrid<T>) => void): void;
+    onCreate(vnode: IJSLVNode): void;
+    onRemove(vnode: IJSLVNode): void;
+    render(): IJSLVNode;
+    private checkVisibility;
+    private resizeEventListener;
+    private anyInputIsFocused;
+    private isVisible;
+}

package/lib/components/grid/GridComponent.js

@@ -0,0 +1,116 @@
+import { Slick } from "../../grid/slick.core";
+import { createJSLGrid } from "../../grid/slick.creator";
+var GridComponent = /** @class */ (function () {
+    function GridComponent(data, columns, options, height) {
+        var _this = this;
+        this.data = data;
+        this.columns = columns;
+        this.options = options;
+        this.currentlyVisible = true;
+        this.checkVisibleTimeout = 0;
+        this.initEventsFnc = [];
+        this.resizeEventListener = function () {
+            _this.ref.then(function (g) {
+                if (_this.isVisible(g) && !_this.anyInputIsFocused()) {
+                    g.resizeCanvas();
+                }
+            });
+        };
+        var style = "";
+        if (!options.autoHeight) {
+            style = "height:" + (height !== null && height !== void 0 ? height : "400px");
+        }
+        this.rootTag = {
+            tag: "div",
+            attr: {
+                style: style
+            }
+        };
+        this.ref = new Promise(function (resolve, reject) {
+            _this.refResolver = resolve;
+        });
+    }
+    GridComponent.prototype.getRootTag = function () {
+        return this.rootTag;
+    };
+    GridComponent.prototype.getRef = function () {
+        return this.ref;
+    };
+    GridComponent.prototype.initEvents = function (fnc) {
+        this.initEventsFnc.push(fnc);
+    };
+    GridComponent.prototype.onCreate = function (vnode) {
+        var _this = this;
+        // let grid;
+        setTimeout(function () {
+            if (Array.isArray(_this.data)) {
+                _this.gridRef = createJSLGrid(vnode.dom, _this.data, _this.columns, _this.options);
+            }
+            else {
+                var rawData_1 = [];
+                _this.gridRef = createJSLGrid(vnode.dom, rawData_1, _this.columns, _this.options);
+                _this.data.then(function (result) {
+                    for (var i = 0; i < result.length; i++) {
+                        rawData_1.push(result[i]);
+                    }
+                    _this.gridRef.refreshData();
+                });
+            }
+            _this.refResolver(_this.gridRef);
+            for (var idx = 0; idx < _this.initEventsFnc.length; idx++) {
+                _this.initEventsFnc[idx](_this.gridRef);
+            }
+            window.addEventListener("resize", _this.resizeEventListener);
+            _this.checkVisibility(_this.gridRef);
+        }, 1);
+    };
+    GridComponent.prototype.onRemove = function (vnode) {
+        var _this = this;
+        if (this.gridRef != null) {
+            this.gridRef.destroy();
+            this.gridRef = null;
+        }
+        this.ref = new Promise(function (resolve, reject) {
+            _this.refResolver = resolve;
+        });
+        if (this.checkVisibleTimeout !== 0) {
+            clearTimeout(this.checkVisibleTimeout);
+        }
+        window.removeEventListener("resize", this.resizeEventListener);
+    };
+    GridComponent.prototype.render = function () {
+        return this.rootTag;
+    };
+    GridComponent.prototype.checkVisibility = function (g) {
+        var _this = this;
+        if (!this.isVisible(g)) {
+            this.currentlyVisible = false;
+            this.checkVisibleTimeout = setTimeout(function () { _this.checkVisibility(g); }, 1000);
+        }
+        else {
+            if (!this.currentlyVisible) {
+                this.currentlyVisible = true;
+                g.invalidateAllRows();
+                g.resizeCanvas();
+            }
+            this.checkVisibleTimeout = 0;
+        }
+    };
+    GridComponent.prototype.anyInputIsFocused = function () {
+        // this check is necessary because of mobile virtual keyboard
+        // -> virtual keyboard triggers window resize event -> which would reset any editors
+        return Slick.GlobalEditorLock.isActive() && document.querySelector("input:focus") != null;
+    };
+    GridComponent.prototype.isVisible = function (g) {
+        var el = g.getViewportNode().parentElement;
+        while (el != null && el !== document.body) {
+            if (getComputedStyle(el, null).display === "none") {
+                return false;
+            }
+            el = el.parentElement;
+        }
+        return el != null;
+    };
+    return GridComponent;
+}());
+export { GridComponent };

package/lib/components/input/InputComponent.d.ts

@@ -0,0 +1,33 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface IInputOptions<T = any> {
+    value?: string;
+    enabled?: boolean;
+    class?: string;
+    style?: string;
+    onChange?: EventHandler<string> | ((v?: string) => void);
+    onInput?: EventHandler<string> | ((v?: string) => void);
+    id?: string;
+    bindTo?: T;
+    property?: keyof T;
+    placeholder?: string;
+    converter?: IDataConverter<any, string>;
+    bindMode?: "toModel" | "fromModel" | "both";
+    bindOnInput?: boolean;
+    maxLength?: number;
+    type?: "input" | "text" | "password" | "textarea" | "color";
+}
+export declare class InputComponent<T = any> implements IJSLComponent {
+    private options;
+    private currentDom;
+    get onChange(): EventHandler<string>;
+    get onInput(): EventHandler<string>;
+    constructor(options: IInputOptions<T>);
+    render(): IJSLVNode;
+    getValue(): string;
+    setValue(value: string): void;
+    onCreate(node: IJSLVNode): void;
+    private raiseChangeEvent;
+    private raiseInputEvent;
+}