jsl-ui 9.28.3 → 9.28.4

package/lib/grid/slick.editors.lookup.js

@@ -1,352 +1,352 @@
-import { JSLRender } from "jsl-render";
-import { SelectComponent } from "../components/select/SelectComponent";
-import { AutoSuggestComponent } from "../components/auto-suggest/AutoSuggestComponent";
-/*
- * Contains extended SlickGrid editors.
- */
-export function MultiLookupEditor(args) {
-    var select;
-    var defaultValue;
-    // var scope = this;
-    this.init = function () {
-        // input = document.createElement("select");
-        args.container.addEventListener("keydown", function (e) {
-            if (e.which === 38 || e.which === 40) {
-                e.stopImmediatePropagation();
-            }
-            // if (e.which === 13) {
-            //     e.stopImmediatePropagation();
-            // }
-        });
-        let vl = args.column.valueList;
-        let data = [];
-        if (vl) {
-            if (Array.isArray(vl)) {
-                for (const element of vl) {
-                    if (typeof element === "string") {
-                        data.push({ text: element, value: element });
-                    }
-                    else {
-                        data.push(element);
-                    }
-                }
-            }
-            else {
-                for (const key in vl) {
-                    if (!vl.hasOwnProperty(key)) {
-                        continue;
-                    }
-                    data.push({ text: vl[key], value: key });
-                }
-            }
-        }
-        else {
-            console.warn("No value list found for column " + args.column.id);
-        }
-        select = new SelectComponent({
-            data,
-            dropdownWidth: args.column.width + "px",
-            multiple: true,
-            style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;",
-            openOnEnter: false,
-            ...args.column.editorOptions
-        });
-        new JSLRender(args.container).render(select);
-        //dropdown = DropDown(input, { data: data, multiple: true, searchable: false, defaultSelected: false });
-    };
-    this.destroy = function () {
-        // TODO ? - or not?
-        // dropdown.destroy();
-        // input.parentElement.removeChild(input);
-    };
-    this.focus = function () {
-        select.show();
-    };
-    this.getValue = function () {
-        return select.getValue();
-    };
-    this.setValue = function (val) {
-        select.setValue(val);
-    };
-    this.loadValue = function (item) {
-        defaultValue = item[args.column.field] || [];
-        select.setValue(defaultValue);
-        setTimeout(function () { select.show(); }, 1);
-    };
-    this.serializeValue = function () {
-        return select.getValue();
-    };
-    this.applyValue = function (item, state) {
-        item[args.column.field] = state;
-    };
-    this.isValueChanged = function () {
-        const a = defaultValue || [];
-        const b = select.getValue() || [];
-        return a.toString() !== b.toString();
-    };
-    this.validate = function () {
-        if (args.column.validator) {
-            var validationResults = args.column.validator(select.getValue());
-            if (!validationResults.valid) {
-                return validationResults;
-            }
-        }
-        return {
-            valid: true,
-            msg: null
-        };
-    };
-    this.init();
-}
-export function LookupEditor(args) {
-    // var input: HTMLDivElement;
-    var dropdown;
-    var defaultValue;
-    var scope = this;
-    var reposition = true;
-    this.keyCaptureList = function (which) {
-        if (which === 13) {
-            dropdown.show();
-            return false;
-        }
-        if (which === 38 || which === 40) {
-            if (dropdown.isExpanded()) {
-                return false;
-            }
-        }
-    };
-    this.init = function () {
-        // input = document.createElement("div");
-        let vl = args.column.valueList;
-        let data = [];
-        if (vl) {
-            if (Array.isArray(vl)) {
-                for (const element of vl) {
-                    if (typeof element === "string") {
-                        data.push({ text: element, value: element });
-                    }
-                    else {
-                        data.push(element);
-                    }
-                }
-            }
-            else {
-                for (const key in vl) {
-                    if (!vl.hasOwnProperty(key)) {
-                        continue;
-                    }
-                    data.push({ text: vl[key], value: key });
-                }
-            }
-        }
-        else {
-            console.warn("No value list found for column " + args.column.id);
-        }
-        // args.container.appendChild(input);
-        dropdown = new SelectComponent({
-            data,
-            dropdownWidth: args.column.width + "px",
-            style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;",
-            openOnEnter: false,
-            // onAppend: (dom) => {
-            //     (args.grid as ISlickGrid<any>).getContainerNode().appendChild(dom);
-            // },
-            onChange: (e) => {
-                args.commitChangesOnly();
-                // args.grid.getEditorLock().commitChangesOnly();
-            },
-            ...args.column.editorOptions
-        });
-        //dropdown = DropDown(input, { ...{ data, searchable: false, defaultSelected: false, pagination: 100 }, ...args.column.editorOptions });
-        new JSLRender(args.container, false).render(dropdown);
-        // dropdown.show();
-    };
-    this.show = function () {
-        reposition = true;
-        // if (dropdown.isExpanded()) {
-        //     const dd = document.querySelector(".sel-comp-dd") as HTMLDivElement;
-        //     dd.style.display = "";
-        // }
-    };
-    this.hide = function () {
-        reposition = false;
-    };
-    this.position = function (position) {
-        if (dropdown.isExpanded() && reposition) {
-            const dd = document.querySelector(".sel-comp-dd");
-            if (dd.classList.contains("sel-comp-dd-up")) {
-                dd.style.top = (position.top - dd.getBoundingClientRect().height) + "px";
-            }
-            else {
-                dd.style.top = (position.top + args.grid.getOptions().rowHeight) + "px";
-            }
-            dd.style.left = (position.left) + "px";
-        }
-    };
-    this.destroy = function () {
-        dropdown.destroy();
-        // input.parentElement.removeChild(input);
-    };
-    this.focus = function () {
-        // input.focus();
-        dropdown.show();
-    };
-    this.getValue = function () {
-        return dropdown.getValue();
-    };
-    this.setValue = function (val) {
-        dropdown.setValue(val != null ? val.toString() : val);
-    };
-    this.loadValue = function (item) {
-        defaultValue = item[args.column.field];
-        dropdown.setValue(defaultValue);
-    };
-    this.serializeValue = function () {
-        return dropdown.getValue();
-    };
-    this.applyValue = function (item, state) {
-        item[args.column.field] = state;
-    };
-    this.isValueChanged = function () {
-        return (dropdown.getValue() !== defaultValue);
-    };
-    this.validate = function () {
-        if (args.column.validator) {
-            var validationResults = args.column.validator(dropdown.getValue());
-            if (!validationResults.valid) {
-                return validationResults;
-            }
-        }
-        return {
-            valid: true,
-            msg: null
-        };
-    };
-    this.init();
-}
-export function AutoSuggestEditor(args) {
-    // var input: HTMLDivElement;
-    var dropdown;
-    var defaultValue;
-    var scope = this;
-    var reposition = true;
-    this.keyCaptureList = function (which) {
-        // if (which === 13) {
-        //     dropdown.show();
-        //     return false;
-        // }
-        if (which === 38 || which === 40) {
-            // if (dropdown.isExpanded()) {
-            return false;
-            // }
-        }
-    };
-    this.init = function () {
-        // input = document.createElement("div");
-        let vl = args.column.valueList;
-        let data = [];
-        if (vl) {
-            if (Array.isArray(vl)) {
-                for (const element of vl) {
-                    if (typeof element === "string") {
-                        data.push({ text: element, value: element });
-                    }
-                    else {
-                        data.push(element);
-                    }
-                }
-            }
-            else {
-                for (const key in vl) {
-                    if (!vl.hasOwnProperty(key)) {
-                        continue;
-                    }
-                    data.push({ text: vl[key], value: key });
-                }
-            }
-        }
-        else {
-            console.warn("No value list found for column " + args.column.id);
-        }
-        // dropdown = new SelectComponent({
-        //     data,
-        //     dropdownWidth: args.column.width + "px",
-        //     style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;",
-        //     openOnEnter: false,
-        //     // onAppend: (dom) => {
-        //     //     (args.grid as ISlickGrid<any>).getContainerNode().appendChild(dom);
-        //     // },
-        //     ...args.column.editorOptions
-        // });
-        dropdown = new AutoSuggestComponent({
-            style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box;",
-            source: (val, suggest) => {
-                const term = (val || "").toLowerCase();
-                suggest(data.filter((x) => {
-                    return term === "" || x.text.toLowerCase().indexOf(term) >= 0;
-                }).map((x) => x.text));
-            },
-            cache: false
-        });
-        new JSLRender(args.container, false).render(dropdown);
-        dropdown.focus();
-    };
-    this.show = function () {
-        reposition = true;
-    };
-    this.hide = function () {
-        reposition = false;
-    };
-    this.position = function (position) {
-        // if (dropdown.isExpanded() && reposition) {
-        //     const dd = document.querySelector(".sel-comp-dd") as HTMLDivElement;
-        //     if (dd.classList.contains("sel-comp-dd-up")) {
-        //         dd.style.top = (position.top - dd.getBoundingClientRect().height) + "px";
-        //     } else {
-        //         dd.style.top = (position.top + args.grid.getOptions().rowHeight) + "px";
-        //     }
-        //     dd.style.left = (position.left) + "px";
-        // }
-    };
-    this.destroy = function () {
-        var _a;
-        (_a = dropdown.getRef()) === null || _a === void 0 ? void 0 : _a.destroy();
-    };
-    this.focus = function () {
-        dropdown.focus();
-    };
-    this.getValue = function () {
-        return dropdown.getValue();
-    };
-    this.setValue = function (val) {
-        // dropdown.setValue(val != null ? val.toString() : val);
-        dropdown.setValue(val || "");
-    };
-    this.loadValue = function (item) {
-        defaultValue = item[args.column.field];
-        // dropdown.setValue(defaultValue);
-        dropdown.setValue(defaultValue || "");
-    };
-    this.serializeValue = function () {
-        return dropdown.getValue();
-    };
-    this.applyValue = function (item, state) {
-        item[args.column.field] = state;
-    };
-    this.isValueChanged = function () {
-        return (dropdown.getValue() !== defaultValue);
-    };
-    this.validate = function () {
-        if (args.column.validator) {
-            var validationResults = args.column.validator(dropdown.getValue());
-            if (!validationResults.valid) {
-                return validationResults;
-            }
-        }
-        return {
-            valid: true,
-            msg: null
-        };
-    };
-    this.init();
-}
+import { JSLRender } from "jsl-render";
+import { SelectComponent } from "../components/select/SelectComponent";
+import { AutoSuggestComponent } from "../components/auto-suggest/AutoSuggestComponent";
+/*
+ * Contains extended SlickGrid editors.
+ */
+export function MultiLookupEditor(args) {
+    var select;
+    var defaultValue;
+    // var scope = this;
+    this.init = function () {
+        // input = document.createElement("select");
+        args.container.addEventListener("keydown", function (e) {
+            if (e.which === 38 || e.which === 40) {
+                e.stopImmediatePropagation();
+            }
+            // if (e.which === 13) {
+            //     e.stopImmediatePropagation();
+            // }
+        });
+        let vl = args.column.valueList;
+        let data = [];
+        if (vl) {
+            if (Array.isArray(vl)) {
+                for (const element of vl) {
+                    if (typeof element === "string") {
+                        data.push({ text: element, value: element });
+                    }
+                    else {
+                        data.push(element);
+                    }
+                }
+            }
+            else {
+                for (const key in vl) {
+                    if (!vl.hasOwnProperty(key)) {
+                        continue;
+                    }
+                    data.push({ text: vl[key], value: key });
+                }
+            }
+        }
+        else {
+            console.warn("No value list found for column " + args.column.id);
+        }
+        select = new SelectComponent({
+            data,
+            dropdownWidth: args.column.width + "px",
+            multiple: true,
+            style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;",
+            openOnEnter: false,
+            ...args.column.editorOptions
+        });
+        new JSLRender(args.container).render(select);
+        //dropdown = DropDown(input, { data: data, multiple: true, searchable: false, defaultSelected: false });
+    };
+    this.destroy = function () {
+        // TODO ? - or not?
+        // dropdown.destroy();
+        // input.parentElement.removeChild(input);
+    };
+    this.focus = function () {
+        select.show();
+    };
+    this.getValue = function () {
+        return select.getValue();
+    };
+    this.setValue = function (val) {
+        select.setValue(val);
+    };
+    this.loadValue = function (item) {
+        defaultValue = item[args.column.field] || [];
+        select.setValue(defaultValue);
+        setTimeout(function () { select.show(); }, 1);
+    };
+    this.serializeValue = function () {
+        return select.getValue();
+    };
+    this.applyValue = function (item, state) {
+        item[args.column.field] = state;
+    };
+    this.isValueChanged = function () {
+        const a = defaultValue || [];
+        const b = select.getValue() || [];
+        return a.toString() !== b.toString();
+    };
+    this.validate = function () {
+        if (args.column.validator) {
+            var validationResults = args.column.validator(select.getValue());
+            if (!validationResults.valid) {
+                return validationResults;
+            }
+        }
+        return {
+            valid: true,
+            msg: null
+        };
+    };
+    this.init();
+}
+export function LookupEditor(args) {
+    // var input: HTMLDivElement;
+    var dropdown;
+    var defaultValue;
+    var scope = this;
+    var reposition = true;
+    this.keyCaptureList = function (which) {
+        if (which === 13) {
+            dropdown.show();
+            return false;
+        }
+        if (which === 38 || which === 40) {
+            if (dropdown.isExpanded()) {
+                return false;
+            }
+        }
+    };
+    this.init = function () {
+        // input = document.createElement("div");
+        let vl = args.column.valueList;
+        let data = [];
+        if (vl) {
+            if (Array.isArray(vl)) {
+                for (const element of vl) {
+                    if (typeof element === "string") {
+                        data.push({ text: element, value: element });
+                    }
+                    else {
+                        data.push(element);
+                    }
+                }
+            }
+            else {
+                for (const key in vl) {
+                    if (!vl.hasOwnProperty(key)) {
+                        continue;
+                    }
+                    data.push({ text: vl[key], value: key });
+                }
+            }
+        }
+        else {
+            console.warn("No value list found for column " + args.column.id);
+        }
+        // args.container.appendChild(input);
+        dropdown = new SelectComponent({
+            data,
+            dropdownWidth: args.column.width + "px",
+            style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;",
+            openOnEnter: false,
+            // onAppend: (dom) => {
+            //     (args.grid as ISlickGrid<any>).getContainerNode().appendChild(dom);
+            // },
+            onChange: (e) => {
+                args.commitChangesOnly();
+                // args.grid.getEditorLock().commitChangesOnly();
+            },
+            ...args.column.editorOptions
+        });
+        //dropdown = DropDown(input, { ...{ data, searchable: false, defaultSelected: false, pagination: 100 }, ...args.column.editorOptions });
+        new JSLRender(args.container, false).render(dropdown);
+        // dropdown.show();
+    };
+    this.show = function () {
+        reposition = true;
+        // if (dropdown.isExpanded()) {
+        //     const dd = document.querySelector(".sel-comp-dd") as HTMLDivElement;
+        //     dd.style.display = "";
+        // }
+    };
+    this.hide = function () {
+        reposition = false;
+    };
+    this.position = function (position) {
+        if (dropdown.isExpanded() && reposition) {
+            const dd = document.querySelector(".sel-comp-dd");
+            if (dd.classList.contains("sel-comp-dd-up")) {
+                dd.style.top = (position.top - dd.getBoundingClientRect().height) + "px";
+            }
+            else {
+                dd.style.top = (position.top + args.grid.getOptions().rowHeight) + "px";
+            }
+            dd.style.left = (position.left) + "px";
+        }
+    };
+    this.destroy = function () {
+        dropdown.destroy();
+        // input.parentElement.removeChild(input);
+    };
+    this.focus = function () {
+        // input.focus();
+        dropdown.show();
+    };
+    this.getValue = function () {
+        return dropdown.getValue();
+    };
+    this.setValue = function (val) {
+        dropdown.setValue(val != null ? val.toString() : val);
+    };
+    this.loadValue = function (item) {
+        defaultValue = item[args.column.field];
+        dropdown.setValue(defaultValue);
+    };
+    this.serializeValue = function () {
+        return dropdown.getValue();
+    };
+    this.applyValue = function (item, state) {
+        item[args.column.field] = state;
+    };
+    this.isValueChanged = function () {
+        return (dropdown.getValue() !== defaultValue);
+    };
+    this.validate = function () {
+        if (args.column.validator) {
+            var validationResults = args.column.validator(dropdown.getValue());
+            if (!validationResults.valid) {
+                return validationResults;
+            }
+        }
+        return {
+            valid: true,
+            msg: null
+        };
+    };
+    this.init();
+}
+export function AutoSuggestEditor(args) {
+    // var input: HTMLDivElement;
+    var dropdown;
+    var defaultValue;
+    var scope = this;
+    var reposition = true;
+    this.keyCaptureList = function (which) {
+        // if (which === 13) {
+        //     dropdown.show();
+        //     return false;
+        // }
+        if (which === 38 || which === 40) {
+            // if (dropdown.isExpanded()) {
+            return false;
+            // }
+        }
+    };
+    this.init = function () {
+        // input = document.createElement("div");
+        let vl = args.column.valueList;
+        let data = [];
+        if (vl) {
+            if (Array.isArray(vl)) {
+                for (const element of vl) {
+                    if (typeof element === "string") {
+                        data.push({ text: element, value: element });
+                    }
+                    else {
+                        data.push(element);
+                    }
+                }
+            }
+            else {
+                for (const key in vl) {
+                    if (!vl.hasOwnProperty(key)) {
+                        continue;
+                    }
+                    data.push({ text: vl[key], value: key });
+                }
+            }
+        }
+        else {
+            console.warn("No value list found for column " + args.column.id);
+        }
+        // dropdown = new SelectComponent({
+        //     data,
+        //     dropdownWidth: args.column.width + "px",
+        //     style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;",
+        //     openOnEnter: false,
+        //     // onAppend: (dom) => {
+        //     //     (args.grid as ISlickGrid<any>).getContainerNode().appendChild(dom);
+        //     // },
+        //     ...args.column.editorOptions
+        // });
+        dropdown = new AutoSuggestComponent({
+            style: "min-width:0;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box;",
+            source: (val, suggest) => {
+                const term = (val || "").toLowerCase();
+                suggest(data.filter((x) => {
+                    return term === "" || x.text.toLowerCase().indexOf(term) >= 0;
+                }).map((x) => x.text));
+            },
+            cache: false
+        });
+        new JSLRender(args.container, false).render(dropdown);
+        dropdown.focus();
+    };
+    this.show = function () {
+        reposition = true;
+    };
+    this.hide = function () {
+        reposition = false;
+    };
+    this.position = function (position) {
+        // if (dropdown.isExpanded() && reposition) {
+        //     const dd = document.querySelector(".sel-comp-dd") as HTMLDivElement;
+        //     if (dd.classList.contains("sel-comp-dd-up")) {
+        //         dd.style.top = (position.top - dd.getBoundingClientRect().height) + "px";
+        //     } else {
+        //         dd.style.top = (position.top + args.grid.getOptions().rowHeight) + "px";
+        //     }
+        //     dd.style.left = (position.left) + "px";
+        // }
+    };
+    this.destroy = function () {
+        var _a;
+        (_a = dropdown.getRef()) === null || _a === void 0 ? void 0 : _a.destroy();
+    };
+    this.focus = function () {
+        dropdown.focus();
+    };
+    this.getValue = function () {
+        return dropdown.getValue();
+    };
+    this.setValue = function (val) {
+        // dropdown.setValue(val != null ? val.toString() : val);
+        dropdown.setValue(val || "");
+    };
+    this.loadValue = function (item) {
+        defaultValue = item[args.column.field];
+        // dropdown.setValue(defaultValue);
+        dropdown.setValue(defaultValue || "");
+    };
+    this.serializeValue = function () {
+        return dropdown.getValue();
+    };
+    this.applyValue = function (item, state) {
+        item[args.column.field] = state;
+    };
+    this.isValueChanged = function () {
+        return (dropdown.getValue() !== defaultValue);
+    };
+    this.validate = function () {
+        if (args.column.validator) {
+            var validationResults = args.column.validator(dropdown.getValue());
+            if (!validationResults.valid) {
+                return validationResults;
+            }
+        }
+        return {
+            valid: true,
+            msg: null
+        };
+    };
+    this.init();
+}