jsl-ui 9.18.2 → 9.18.3

package/lib/components/expander/ExpanderComponent.js

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

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

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

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

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

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

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

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

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

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

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