jsl-ui 9.18.2 → 9.18.3

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

@@ -1,353 +0,0 @@
-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 { 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();
-            // }
-        });
-        var vl = args.column.valueList;
-        var data = [];
-        if (vl) {
-            if (Array.isArray(vl)) {
-                for (var _i = 0, vl_1 = vl; _i < vl_1.length; _i++) {
-                    var element = vl_1[_i];
-                    if (typeof element === "string") {
-                        data.push({ text: element, value: element });
-                    }
-                    else {
-                        data.push(element);
-                    }
-                }
-            }
-            else {
-                for (var 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(__assign({ data: 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 () {
-        var a = defaultValue || [];
-        var 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");
-        var vl = args.column.valueList;
-        var data = [];
-        if (vl) {
-            if (Array.isArray(vl)) {
-                for (var _i = 0, vl_2 = vl; _i < vl_2.length; _i++) {
-                    var element = vl_2[_i];
-                    if (typeof element === "string") {
-                        data.push({ text: element, value: element });
-                    }
-                    else {
-                        data.push(element);
-                    }
-                }
-            }
-            else {
-                for (var 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(__assign({ data: 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: function (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) {
-            var 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");
-        var vl = args.column.valueList;
-        var data = [];
-        if (vl) {
-            if (Array.isArray(vl)) {
-                for (var _i = 0, vl_3 = vl; _i < vl_3.length; _i++) {
-                    var element = vl_3[_i];
-                    if (typeof element === "string") {
-                        data.push({ text: element, value: element });
-                    }
-                    else {
-                        data.push(element);
-                    }
-                }
-            }
-            else {
-                for (var 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: function (val, suggest) {
-                var term = (val || "").toLowerCase();
-                suggest(data.filter(function (x) {
-                    return term === "" || x.text.toLowerCase().indexOf(term) >= 0;
-                }).map(function (x) { return 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();
-}

package/lib/grid/slick.editors.nav.d.ts

@@ -1,6 +0,0 @@
-export declare let keyCodes: {
-    LEFT: number;
-    RIGHT: number;
-};
-export declare function handleKeydownLRNav(e: any): void;
-export declare function handleKeydownLRNoNav(e: any): void;

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

@@ -1,22 +0,0 @@
-export var keyCodes = {
-    LEFT: 37,
-    RIGHT: 39
-};
-/*
- * Depending on the value of Grid option 'editorCellNavOnLRKeys', us
- * Navigate to the cell on the left if the cursor is at the beginning of the input string
- * and to the right cell if it's at the end. Otherwise, move the cursor within the text
- */
-export function handleKeydownLRNav(e) {
-    var cursorPosition = e.target.selectionStart;
-    var textLength = e.target.value.length;
-    if ((e.which === keyCodes.LEFT && cursorPosition > 0) ||
-        e.which === keyCodes.RIGHT && cursorPosition < textLength) {
-        e.stopImmediatePropagation();
-    }
-}
-export function handleKeydownLRNoNav(e) {
-    if (e.which === keyCodes.LEFT || e.which === keyCodes.RIGHT) {
-        e.stopImmediatePropagation();
-    }
-}

package/lib/grid/slick.formatters.d.ts

@@ -1,17 +0,0 @@
-import { ISlickFormatter } from './slick.core';
-export declare let EmptyFormatter: ISlickFormatter;
-export declare let ComponentFormatter: ISlickFormatter;
-export declare let YesNoFormatter: ISlickFormatter;
-export declare let CheckboxFormatter: ISlickFormatter;
-export declare let CheckmarkFormatter: ISlickFormatter;
-export declare let NumericFormatter: ISlickFormatter;
-export declare let DateFormatter: ISlickFormatter;
-export declare let HtmlFormatter: ISlickFormatter;
-export declare let LookupFormatter: ISlickFormatter;
-export declare let MultiLookupFormatter: ISlickFormatter;
-export declare let TextFormatter: ISlickFormatter;
-export declare let TooltipFormatter: ISlickFormatter;
-export declare let MultiLineTextFormatter: ISlickFormatter;
-export declare let TimeFormatter: ISlickFormatter;
-export declare let DateTimeFormatter: ISlickFormatter;
-export declare let ButtonFormatter: ISlickFormatter;

package/lib/grid/slick.formatters.js

@@ -1,137 +0,0 @@
-/*
- * Contains basic SlickGrid formatters.
- *
- * NOTE:  These are merely examples.  You will most likely need to implement something more
- *        robust/extensible/localizable/etc. for your use!
- */
-import { numeric } from '../core/numeric';
-import { date } from '../core/date';
-function escapeHTMLChars(text) {
-    if (text == null) {
-        return "";
-    }
-    if (typeof text.replace !== "function") {
-        return text;
-    }
-    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-export var EmptyFormatter = function (row, cell, value, columnDef, dataContext) {
-    return "";
-};
-export var ComponentFormatter = EmptyFormatter;
-export var YesNoFormatter = function (row, cell, value, columnDef, dataContext) {
-    return value ? "Yes" : "No";
-};
-export var CheckboxFormatter = function (row, cell, value, columnDef, dataContext) {
-    return '<div style="text-align:center">' + (value ? "✔" : "-") + '</div>'; // ❌
-};
-export var CheckmarkFormatter = function (row, cell, value, columnDef, dataContext) {
-    return value ? "✔" : "";
-};
-export var NumericFormatter = function (row, cell, value, columnDef, dataContext) {
-    return {
-        addClasses: ["right"],
-        text: numeric.format(value, columnDef.format)
-    };
-};
-export var DateFormatter = function (row, cell, value, columnDef, dataContext) {
-    return date.format(value, columnDef.format);
-};
-export var HtmlFormatter = function (row, cell, value, columnDef, dataContext) {
-    return value || "";
-};
-export var LookupFormatter = function (row, cell, value, columnDef, dataContext) {
-    var _a;
-    var vl = columnDef.valueList;
-    if (vl) {
-        if (Array.isArray(vl)) {
-            if (vl.length > 0) {
-                if (typeof (vl[0]) === "string") {
-                    return escapeHTMLChars(vl.indexOf(value) >= 0 ? value : ""); //TODO: desired?
-                }
-                else {
-                    var vlList = vl;
-                    return escapeHTMLChars((_a = vlList.filter(function (x) { return x.value === value; })[0]) === null || _a === void 0 ? void 0 : _a.text);
-                }
-            }
-            else {
-                return "";
-            }
-        }
-        else {
-            return escapeHTMLChars(vl[value]);
-        }
-    }
-    else {
-        console.warn("No values list found for column " + columnDef.id);
-    }
-    return escapeHTMLChars(value);
-};
-export var MultiLookupFormatter = function (row, cell, value, columnDef, dataContext) {
-    if (value == null || value.length === 0) {
-        return "";
-    }
-    var vl = columnDef.valueList;
-    var result = "";
-    if (vl == null) {
-        console.warn("No values list found for column " + columnDef.id);
-        return result;
-    }
-    if (Array.isArray(vl)) {
-        if (vl.length > 0) {
-            if (typeof (vl[0]) === "string") {
-                result = value.filter(function (v) { return vl.indexOf(v) >= 0; }).join(", ");
-            }
-            else {
-                var vlList = vl;
-                result = vlList.filter(function (x) { return value.indexOf(x.value) >= 0; }).map(function (x) { var _a; return (_a = x.text) !== null && _a !== void 0 ? _a : ""; }).join(", ");
-            }
-        }
-    }
-    else {
-        result = value.map(function (v) { return vl[v]; }).filter(function (v) { return v != null; }).join(", ");
-    }
-    return result || "";
-};
-export var TextFormatter = function (row, cell, value, columnDef, dataContext) {
-    if (value == null) {
-        return "";
-    }
-    else {
-        return escapeHTMLChars(value + "");
-    }
-};
-export var TooltipFormatter = function (row, cell, value, columnDef, dataContext) {
-    if (value == null) {
-        return "";
-    }
-    else {
-        var result = escapeHTMLChars(value + "");
-        return { text: result, toolTip: result };
-    }
-};
-export var MultiLineTextFormatter = function (row, cell, value, columnDef, dataContext) {
-    var txt = "";
-    if (value != null) {
-        txt = escapeHTMLChars(value + "");
-    }
-    return { text: txt, addClasses: ["slick-wrap"] };
-};
-function pad(nr) {
-    if (nr < 10) {
-        return "0" + nr.toString();
-    }
-    else {
-        return nr.toString();
-    }
-}
-export var TimeFormatter = function (row, cell, value, columnDef, dataContext) {
-    return value ? (pad(value.getHours()) + ":" + pad(value.getMinutes())) : "";
-};
-export var DateTimeFormatter = function (row, cell, value, columnDef, dataContext) {
-    return DateFormatter(row, cell, value, columnDef, dataContext) + " " +
-        TimeFormatter(row, cell, value, columnDef, dataContext);
-};
-export var ButtonFormatter = function (row, cell, value, columnDef, dataContext) {
-    return "<button class='grid-btn'>...</button>";
-};