jsl-ui 9.28.2 → 9.28.3

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

@@ -1,140 +1,138 @@
-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,
-                                disabled: this.options.disabled ? "disabled" : undefined
-                            }
-                        }
-                    ]
-                }]
-        };
-    };
-    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 };
+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";
+export class FormFieldComponent {
+    constructor(options) {
+        this.options = options;
+        this.id = options.id || helper.newDomGuid();
+        this.type = this.options.type === "password" ? "password" : "text";
+    }
+    render() {
+        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,
+                                disabled: this.options.disabled ? "disabled" : undefined
+                            }
+                        }
+                    ]
+                }]
+        };
+    }
+    onCreate(node) {
+        const 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);
+        }
+    }
+    onRemove(node) {
+        if (this.datepickerRef != null) {
+            this.datepickerRef.destroy();
+        }
+    }
+    validate() {
+        const value = this.getValue();
+        if (this.options.required && !value) {
+            this.validationMessage = " ";
+            return false;
+        }
+        if (this.options.onValidate) {
+            const 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;
+    }
+    getValue() {
+        var _a;
+        return (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    setValue(value) {
+        const 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");
+        }
+    }
+    setInActive(evt, node) {
+        const formField = node.dom.parentElement.parentElement;
+        if (formField == null) {
+            return;
+        }
+        setTimeout(() => {
+            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;
+    }
+    setActive(evt, node) {
+        const 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;
+    }
+    onInput(evt, node) {
+        if (this.options.onInput) {
+            this.options.onInput(evt, node);
+            return;
+        }
+    }
+}

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

@@ -1,26 +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;
-}
+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 +1,110 @@
-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 };
+import { Slick } from "../../grid/slick.core";
+import { createJSLGrid } from "../../grid/slick.creator";
+export class GridComponent {
+    constructor(data, columns, options, height) {
+        this.data = data;
+        this.columns = columns;
+        this.options = options;
+        this.currentlyVisible = true;
+        this.checkVisibleTimeout = 0;
+        this.initEventsFnc = [];
+        this.resizeEventListener = () => {
+            this.ref.then((g) => {
+                if (this.isVisible(g) && !this.anyInputIsFocused()) {
+                    g.resizeCanvas();
+                }
+            });
+        };
+        let style = "";
+        if (!options.autoHeight) {
+            style = "height:" + (height !== null && height !== void 0 ? height : "400px");
+        }
+        this.rootTag = {
+            tag: "div",
+            attr: {
+                style
+            }
+        };
+        this.ref = new Promise((resolve, reject) => {
+            this.refResolver = resolve;
+        });
+    }
+    getRootTag() {
+        return this.rootTag;
+    }
+    getRef() {
+        return this.ref;
+    }
+    initEvents(fnc) {
+        this.initEventsFnc.push(fnc);
+    }
+    onCreate(vnode) {
+        // let grid;
+        setTimeout(() => {
+            if (Array.isArray(this.data)) {
+                this.gridRef = createJSLGrid(vnode.dom, this.data, this.columns, this.options);
+            }
+            else {
+                const rawData = [];
+                this.gridRef = createJSLGrid(vnode.dom, rawData, this.columns, this.options);
+                this.data.then((result) => {
+                    for (let i = 0; i < result.length; i++) {
+                        rawData.push(result[i]);
+                    }
+                    this.gridRef.refreshData();
+                });
+            }
+            this.refResolver(this.gridRef);
+            for (let idx = 0; idx < this.initEventsFnc.length; idx++) {
+                this.initEventsFnc[idx](this.gridRef);
+            }
+            window.addEventListener("resize", this.resizeEventListener);
+            this.checkVisibility(this.gridRef);
+        }, 1);
+    }
+    onRemove(vnode) {
+        if (this.gridRef != null) {
+            this.gridRef.destroy();
+            this.gridRef = null;
+        }
+        this.ref = new Promise((resolve, reject) => {
+            this.refResolver = resolve;
+        });
+        if (this.checkVisibleTimeout !== 0) {
+            clearTimeout(this.checkVisibleTimeout);
+        }
+        window.removeEventListener("resize", this.resizeEventListener);
+    }
+    render() {
+        return this.rootTag;
+    }
+    checkVisibility(g) {
+        if (!this.isVisible(g)) {
+            this.currentlyVisible = false;
+            this.checkVisibleTimeout = setTimeout(() => { this.checkVisibility(g); }, 1000);
+        }
+        else {
+            if (!this.currentlyVisible) {
+                this.currentlyVisible = true;
+                g.invalidateAllRows();
+                g.resizeCanvas();
+            }
+            this.checkVisibleTimeout = 0;
+        }
+    }
+    anyInputIsFocused() {
+        // 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;
+    }
+    isVisible(g) {
+        let el = g.getViewportNode().parentElement;
+        while (el != null && el !== document.body) {
+            if (getComputedStyle(el, null).display === "none") {
+                return false;
+            }
+            el = el.parentElement;
+        }
+        return el != null;
+    }
+}

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

@@ -1,33 +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" | "time" | "email" | "month" | "number" | "search" | "tel" | "url" | "week";
-}
-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;
-}
+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" | "time" | "email" | "month" | "number" | "search" | "tel" | "url" | "week";
+}
+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;
+}