jsl-ui 9.28.2 → 9.28.3

package/lib/components/drop-down/DropDownComponent.js

@@ -1,74 +1,60 @@
-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 { DropDown } from "../../ui/drop.down";
-import { EventHandler } from "../../interaction/eventhandler";
-var DropDownComponent = /** @class */ (function () {
-    function DropDownComponent(options) {
-        var _a;
-        this.options = __assign({ enabled: true }, options);
-        this.options.onChange = EventHandler.Create(this.options.onChange);
-        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]);
-        }
-    }
-    DropDownComponent.prototype.render = function () {
-        return {
-            tag: "select"
-        };
-    };
-    DropDownComponent.prototype.getRef = function () {
-        return this.ref;
-    };
-    DropDownComponent.prototype.onCreate = function (node) {
-        var _this = this;
-        this.ref = DropDown(node.dom, this.options);
-        if (!this.options.enabled) {
-            this.ref.disable();
-        }
-        node.dom.parentElement.classList.add(this.options.class);
-        if (this.options.width) {
-            node.dom.parentElement.style.display = "inline-block";
-        }
-        node.dom.addEventListener("change", function (evt) {
-            var _a;
-            var value;
-            if (_this.options.multiple) {
-                value = Array.prototype.slice.call(node.dom.querySelectorAll("option:checked"), 0).map(function (v) { return v.value; });
-            }
-            else {
-                value = node.dom.value;
-            }
-            if (_this.options.bindTo != null && _this.options.property != null) {
-                _this.options.bindTo[_this.options.property] =
-                    ((_a = _this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? _this.options.converter.toData(value) : value;
-            }
-            if (_this.options.onSelect != null) {
-                _this.options.onSelect(value);
-            }
-            if (_this.options.onChange != null) {
-                _this.options.onChange.notify(value);
-            }
-        });
-        if (this.options.value != null) {
-            this.ref.setValue(this.options.value);
-        }
-    };
-    DropDownComponent.prototype.onRemove = function () {
-        if (this.ref != null) {
-            this.ref.destroy();
-        }
-    };
-    return DropDownComponent;
-}());
-export { DropDownComponent };
+import { DropDown } from "../../ui/drop.down";
+import { EventHandler } from "../../interaction/eventhandler";
+export class DropDownComponent {
+    constructor(options) {
+        var _a;
+        this.options = { ...{ enabled: true }, ...options };
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+        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]);
+        }
+    }
+    render() {
+        return {
+            tag: "select"
+        };
+    }
+    getRef() {
+        return this.ref;
+    }
+    onCreate(node) {
+        this.ref = DropDown(node.dom, this.options);
+        if (!this.options.enabled) {
+            this.ref.disable();
+        }
+        node.dom.parentElement.classList.add(this.options.class);
+        if (this.options.width) {
+            node.dom.parentElement.style.display = "inline-block";
+        }
+        node.dom.addEventListener("change", (evt) => {
+            var _a;
+            let value;
+            if (this.options.multiple) {
+                value = Array.prototype.slice.call(node.dom.querySelectorAll("option:checked"), 0).map((v) => v.value);
+            }
+            else {
+                value = node.dom.value;
+            }
+            if (this.options.bindTo != null && this.options.property != null) {
+                this.options.bindTo[this.options.property] =
+                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+            }
+            if (this.options.onSelect != null) {
+                this.options.onSelect(value);
+            }
+            if (this.options.onChange != null) {
+                this.options.onChange.notify(value);
+            }
+        });
+        if (this.options.value != null) {
+            this.ref.setValue(this.options.value);
+        }
+    }
+    onRemove() {
+        if (this.ref != null) {
+            this.ref.destroy();
+        }
+    }
+}

package/lib/components/expander/ExpanderComponent.d.ts

@@ -1,27 +1,27 @@
-import "./ExpanderStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface IExpanderOptions {
-    header: IJSLVNode | string | IJSLComponent;
-    body: IJSLVNode | string | IJSLComponent;
-    expanded?: boolean;
-    onToggle?: (isExpanding: boolean) => void | boolean;
-    expandedIcon?: IJSLVNode;
-    collapsedIcon?: IJSLVNode;
-    isToggleOnHeader?: boolean;
-    class?: string;
-    style?: string;
-    iconSize?: string;
-}
-export declare class ExpanderComponent implements IJSLComponent {
-    State: {
-        expanded: boolean;
-        waitingForAnimation: boolean;
-    };
-    private options;
-    constructor(optionsOrHeader: IExpanderOptions | IJSLVNode | string | IJSLComponent, body?: IJSLVNode | string | IJSLComponent, expanded?: boolean);
-    getIcon(expanded: boolean): IJSLVNode;
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-    private toggleExpand;
-    private toNode;
-}
+import "./ExpanderStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IExpanderOptions {
+    header: IJSLVNode | string | IJSLComponent;
+    body: IJSLVNode | string | IJSLComponent;
+    expanded?: boolean;
+    onToggle?: (isExpanding: boolean) => void | boolean;
+    expandedIcon?: IJSLVNode;
+    collapsedIcon?: IJSLVNode;
+    isToggleOnHeader?: boolean;
+    class?: string;
+    style?: string;
+    iconSize?: string;
+}
+export declare class ExpanderComponent implements IJSLComponent {
+    State: {
+        expanded: boolean;
+        waitingForAnimation: boolean;
+    };
+    private options;
+    constructor(optionsOrHeader: IExpanderOptions | IJSLVNode | string | IJSLComponent, body?: IJSLVNode | string | IJSLComponent, expanded?: boolean);
+    getIcon(expanded: boolean): IJSLVNode;
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private toggleExpand;
+    private toNode;
+}

package/lib/components/expander/ExpanderComponent.js

@@ -1,90 +1,89 @@
-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 };
+import "./ExpanderStyle.scss";
+export class ExpanderComponent {
+    constructor(optionsOrHeader, body, expanded) {
+        var _a;
+        this.State = { expanded: false, waitingForAnimation: false };
+        if (body != null) {
+            // old syntax
+            this.options = { header: optionsOrHeader, 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;
+    }
+    getIcon(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>"
+        };
+    }
+    isEqual(node) {
+        return this.__proto__ === node.__proto__;
+    }
+    render() {
+        var _a, _b, _c;
+        const 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: (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: (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)]
+                }
+            ]
+        };
+    }
+    toggleExpand() {
+        const 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;
+    }
+    toNode(content) {
+        if (typeof content === "string") {
+            return { tag: "div", content };
+        }
+        return content;
+    }
+}

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

@@ -1,12 +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;
-}
+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 +1,23 @@
-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 };
+export class FormComponent {
+    constructor(children, options) {
+        this.children = children;
+        this.options = options;
+    }
+    render() {
+        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
+        };
+    }
+    validate() {
+        let valid = true;
+        for (const c of this.children) {
+            if (c.validate && !c.validate()) {
+                valid = false;
+            }
+        }
+        return valid;
+    }
+}

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

@@ -1,39 +1,39 @@
-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 {
-    disabled?: boolean;
-    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;
-}
+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 {
+    disabled?: boolean;
+    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;
+}