jsl-ui 9.28.3 → 9.28.4

package/lib/grid/filterDialogs/excelFilter.js

@@ -1,250 +1,250 @@
-import { UILang } from "../../core/lang";
-import { helper } from "../../core/helper";
-import { Dialog } from "../../ui/dialog";
-import { VirtualRenderComponent } from "../../components/virtual-render/VirtualRenderComponent";
-import { JSLRender } from "jsl-render";
-export class ExcelFilter {
-    constructor(grid) {
-        this.grid = grid;
-    }
-    static convertRemToPixels(rem) {
-        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
-    }
-    async show(col) {
-        let values;
-        const filters = this.grid.getFilters();
-        const currentFilters = filters.filter((f) => f.columnId === col.id);
-        const mode = this.grid.getOptions().mode;
-        const filterOptions = this.grid.getOptions().getFilterValues;
-        if (filterOptions == null) {
-            if (mode === "client") {
-                // remove any filters for this column
-                if (currentFilters.length > 0) {
-                    this.grid.clearFilter(col.id);
-                }
-                values = this.getDistinctValues(col);
-            }
-            else {
-                throw new Error("getFilterValues option has to be set when filter mode = server");
-            }
-        }
-        else {
-            values = await filterOptions(col);
-        }
-        let oldCheckedValues = {};
-        if (currentFilters.length > 0) {
-            for (const f of currentFilters) {
-                if (f._checkedValues) {
-                    oldCheckedValues = f._checkedValues;
-                }
-                if (mode === "client") {
-                    filters.push(f);
-                }
-            }
-            if (mode === "client") {
-                this.grid.refreshFilters();
-            }
-        }
-        const dlg = document.createElement("div");
-        dlg.classList.add("jsl-dialog-overlay");
-        dlg.innerHTML = '<div class="jsl-dialog" style="width:50vw;min-height:50vh;"><div class="dlg-header">' + UILang.grid.Filter + '</div><div class="dlg-body" style="max-height:calc(100vh - 7.5rem)"></div>' +
-            '<div class="dlg-footer">' +
-            '<button class="jsl-button ok-button">' + UILang.core.Ok + "</button>" +
-            (currentFilters.length > 0 ? ('<button class="jsl-button clear-button">' + UILang.grid.ClearFilter + '</button>') : "") +
-            '<button class="jsl-button close-button">' + UILang.core.Cancel + "</button>" +
-            "</div></div>";
-        const dlgBody = dlg.querySelector(".dlg-body");
-        const id = helper.newDomGuid();
-        const search = document.createElement("div");
-        search.innerHTML = "<input type='text' placeholder='" + UILang.grid.Search + "' />";
-        dlgBody.appendChild(search);
-        const cbAllContainer = document.createElement("div");
-        const cbAll = document.createElement("input");
-        cbAll.type = "checkbox";
-        cbAll.id = id;
-        cbAllContainer.appendChild(cbAll);
-        const cbAllLabel = document.createElement("label");
-        cbAllLabel.setAttribute("for", id);
-        cbAllLabel.textContent = UILang.core.All;
-        cbAllLabel.style.cursor = "pointer";
-        cbAllLabel.style.marginLeft = "0.2rem";
-        cbAllContainer.appendChild(cbAllLabel);
-        dlgBody.appendChild(cbAllContainer);
-        const sortedValues = [];
-        if (Array.isArray(values)) {
-            for (const x of values) {
-                sortedValues.push({ id: [x], txt: x !== null && x !== void 0 ? x : "" });
-            }
-        }
-        else {
-            for (const o in values) {
-                if (values.hasOwnProperty(o)) {
-                    sortedValues.push({ id: values[o], txt: o !== null && o !== void 0 ? o : "" });
-                }
-            }
-        }
-        // TODO: use custom comparer when available
-        sortedValues.sort((a, b) => a.txt.toLocaleLowerCase() < b.txt.toLocaleLowerCase() ? -1 : (a.txt.toLocaleLowerCase() > b.txt.toLocaleLowerCase() ? 1 : 0));
-        let visibleValues = sortedValues;
-        const checkedValues = { ...oldCheckedValues };
-        const cbContainer = document.createElement("div");
-        dlgBody.appendChild(cbContainer);
-        const rowHeight = /*this.grid.getOptions().rowHeight ||*/ Math.round(ExcelFilter.convertRemToPixels(1.5));
-        let height = sortedValues.length * rowHeight;
-        height = Math.min(height, Math.round(window.innerHeight - ExcelFilter.convertRemToPixels(13)));
-        const vr = new VirtualRenderComponent({
-            data: visibleValues,
-            renderRow: (args) => {
-                args.container.attr.style["padding-left"] = "1rem";
-                args.container.attr.style["overflow"] = "hidden";
-                args.container.attr.style["display"] = "flex";
-                args.container.attr.style["align-items"] = "center";
-                args.container.children.push({
-                    tag: "input",
-                    attr: {
-                        id: id + "_" + args.index,
-                        checked: checkedValues[args.rowData.id[0]] ? "checked" : undefined,
-                        change: (_, node) => {
-                            if (node.dom.checked) {
-                                for (const selId of args.rowData.id) {
-                                    checkedValues[selId] = true;
-                                }
-                            }
-                            else {
-                                for (const selId of args.rowData.id) {
-                                    delete checkedValues[selId];
-                                }
-                            }
-                            // check if all values or none are checked
-                            const allChecked = Object.getOwnPropertyNames(checkedValues).length === sortedValues.length;
-                            const allCb = dlgBody.querySelector("#" + id);
-                            allCb.checked = allChecked;
-                        },
-                        type: "checkbox"
-                    }
-                });
-                args.container.children.push({
-                    tag: "label",
-                    attr: {
-                        for: id + "_" + args.index,
-                        style: "margin-left:0.2rem;cursor:pointer"
-                    },
-                    raw: true,
-                    content: args.rowData.txt
-                });
-            },
-            rowHeight,
-            style: "height:" + height + "px"
-        });
-        const renderer = new JSLRender(cbContainer, false);
-        renderer.render(vr);
-        search.addEventListener("input", (evt) => {
-            var _a;
-            const term = ((_a = evt.target.value) !== null && _a !== void 0 ? _a : "").toLowerCase();
-            if (term) {
-                visibleValues = sortedValues.filter((x) => { var _a; return ((_a = x.txt) !== null && _a !== void 0 ? _a : "").toLowerCase().indexOf(term) >= 0; });
-            }
-            else {
-                visibleValues = sortedValues;
-            }
-            vr.setData(visibleValues);
-            renderer.refresh();
-        });
-        cbAll.addEventListener("change", () => {
-            for (let i = 0; i < visibleValues.length; i++) {
-                // if (cbAll.checked) {
-                //     checkedValues[visibleValues[i].id] = true;
-                // } else {
-                //     delete checkedValues[visibleValues[i].id];
-                // }
-                if (cbAll.checked) {
-                    for (const selId of visibleValues[i].id) {
-                        checkedValues[selId] = true;
-                    }
-                }
-                else {
-                    for (const selId of visibleValues[i].id) {
-                        delete checkedValues[selId];
-                    }
-                }
-            }
-            renderer.refresh();
-        });
-        document.body.appendChild(dlg);
-        const dlgObj = Dialog(dlg, {
-            autoOpen: true, onClose: () => {
-                dlg.innerHTML = "";
-                dlg.parentElement.removeChild(dlg);
-            }
-        });
-        const dlgOkButton = dlg.querySelector(".dlg-footer .ok-button");
-        dlgOkButton.addEventListener("click", (evt) => {
-            const selLength = Object.getOwnPropertyNames(checkedValues).length;
-            const allChecked = selLength === sortedValues.length;
-            const anyChecked = selLength > 0;
-            this.grid.clearFilter(col.id, true);
-            if (!allChecked && anyChecked) {
-                // something (but not everything) was selected -> filter
-                const filterObject = {
-                    field: col.field, columnId: col.id, match: mode === "server" ? () => true : (item, field) => {
-                        return !!checkedValues[this.grid.getDataItemValueForColumn(item, col)];
-                    }
-                };
-                filterObject._checkedValues = checkedValues;
-                this.grid.addFilter(filterObject, true);
-            }
-            this.grid.refreshFilters();
-            dlgObj.close();
-        });
-        const dlgCancelButton = dlg.querySelector(".dlg-footer .close-button");
-        dlgCancelButton.addEventListener("click", (evt) => {
-            dlgObj.close();
-        });
-        const dlgClearButton = dlg.querySelector(".dlg-footer .clear-button");
-        if (dlgClearButton != null) {
-            dlgClearButton.addEventListener("click", (evt) => {
-                this.grid.clearFilter(col.id);
-                dlgObj.close();
-            });
-        }
-    }
-    // private updateStateOfAllCheckebox(dlgBody: HTMLElement, id: string) {
-    //     let counter = 0;
-    //     let el: HTMLInputElement;
-    //     const allCb: HTMLInputElement = dlgBody.querySelector("#" + id) as HTMLInputElement;
-    //     // tslint:disable-next-line: no-conditional-assignment
-    //     while (null != (el = dlgBody.querySelector("#" + id + "_" + counter) as HTMLInputElement)) {
-    //         if (el.parentElement.style.display !== "none" && !el.checked) {
-    //             allCb.checked = false;
-    //             return;
-    //         }
-    //         counter++;
-    //     }
-    //     allCb.checked = true;
-    // }
-    // private checkAllVisibleBoxes(el: HTMLElement, state: boolean) {
-    //     const checkboxes = el.querySelectorAll("input");
-    //     for (let i = 0; i < checkboxes.length; i++) {
-    //         if (checkboxes[i].type === "checkbox" &&
-    //             checkboxes[i].parentElement.style.display !== "none") {
-    //             checkboxes[i].checked = state;
-    //         }
-    //     }
-    // }
-    getDistinctValues(col) {
-        const textToValues = {};
-        for (let idx = 0, len = this.grid.getDataLength(); idx < len; idx++) {
-            const item = this.grid.getDataItem(idx);
-            const value = this.grid.getDataItemValueForColumn(item, col);
-            const text = this.grid.getFormattedValue(col, value, item);
-            let valueList = textToValues[text];
-            if (valueList == null) {
-                valueList = textToValues[text] = [];
-            }
-            if (valueList.indexOf(value) < 0) {
-                valueList.push(value);
-            }
-        }
-        return textToValues;
-    }
-}
+import { UILang } from "../../core/lang";
+import { helper } from "../../core/helper";
+import { Dialog } from "../../ui/dialog";
+import { VirtualRenderComponent } from "../../components/virtual-render/VirtualRenderComponent";
+import { JSLRender } from "jsl-render";
+export class ExcelFilter {
+    static convertRemToPixels(rem) {
+        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    }
+    constructor(grid) {
+        this.grid = grid;
+    }
+    async show(col) {
+        let values;
+        const filters = this.grid.getFilters();
+        const currentFilters = filters.filter((f) => f.columnId === col.id);
+        const mode = this.grid.getOptions().mode;
+        const filterOptions = this.grid.getOptions().getFilterValues;
+        if (filterOptions == null) {
+            if (mode === "client") {
+                // remove any filters for this column
+                if (currentFilters.length > 0) {
+                    this.grid.clearFilter(col.id);
+                }
+                values = this.getDistinctValues(col);
+            }
+            else {
+                throw new Error("getFilterValues option has to be set when filter mode = server");
+            }
+        }
+        else {
+            values = await filterOptions(col);
+        }
+        let oldCheckedValues = {};
+        if (currentFilters.length > 0) {
+            for (const f of currentFilters) {
+                if (f._checkedValues) {
+                    oldCheckedValues = f._checkedValues;
+                }
+                if (mode === "client") {
+                    filters.push(f);
+                }
+            }
+            if (mode === "client") {
+                this.grid.refreshFilters();
+            }
+        }
+        const dlg = document.createElement("div");
+        dlg.classList.add("jsl-dialog-overlay");
+        dlg.innerHTML = '<div class="jsl-dialog" style="width:50vw;min-height:50vh;"><div class="dlg-header">' + UILang.grid.Filter + '</div><div class="dlg-body" style="max-height:calc(100vh - 7.5rem)"></div>' +
+            '<div class="dlg-footer">' +
+            '<button class="jsl-button ok-button">' + UILang.core.Ok + "</button>" +
+            (currentFilters.length > 0 ? ('<button class="jsl-button clear-button">' + UILang.grid.ClearFilter + '</button>') : "") +
+            '<button class="jsl-button close-button">' + UILang.core.Cancel + "</button>" +
+            "</div></div>";
+        const dlgBody = dlg.querySelector(".dlg-body");
+        const id = helper.newDomGuid();
+        const search = document.createElement("div");
+        search.innerHTML = "<input type='text' placeholder='" + UILang.grid.Search + "' />";
+        dlgBody.appendChild(search);
+        const cbAllContainer = document.createElement("div");
+        const cbAll = document.createElement("input");
+        cbAll.type = "checkbox";
+        cbAll.id = id;
+        cbAllContainer.appendChild(cbAll);
+        const cbAllLabel = document.createElement("label");
+        cbAllLabel.setAttribute("for", id);
+        cbAllLabel.textContent = UILang.core.All;
+        cbAllLabel.style.cursor = "pointer";
+        cbAllLabel.style.marginLeft = "0.2rem";
+        cbAllContainer.appendChild(cbAllLabel);
+        dlgBody.appendChild(cbAllContainer);
+        const sortedValues = [];
+        if (Array.isArray(values)) {
+            for (const x of values) {
+                sortedValues.push({ id: [x], txt: x !== null && x !== void 0 ? x : "" });
+            }
+        }
+        else {
+            for (const o in values) {
+                if (values.hasOwnProperty(o)) {
+                    sortedValues.push({ id: values[o], txt: o !== null && o !== void 0 ? o : "" });
+                }
+            }
+        }
+        // TODO: use custom comparer when available
+        sortedValues.sort((a, b) => a.txt.toLocaleLowerCase() < b.txt.toLocaleLowerCase() ? -1 : (a.txt.toLocaleLowerCase() > b.txt.toLocaleLowerCase() ? 1 : 0));
+        let visibleValues = sortedValues;
+        const checkedValues = { ...oldCheckedValues };
+        const cbContainer = document.createElement("div");
+        dlgBody.appendChild(cbContainer);
+        const rowHeight = /*this.grid.getOptions().rowHeight ||*/ Math.round(ExcelFilter.convertRemToPixels(1.5));
+        let height = sortedValues.length * rowHeight;
+        height = Math.min(height, Math.round(window.innerHeight - ExcelFilter.convertRemToPixels(13)));
+        const vr = new VirtualRenderComponent({
+            data: visibleValues,
+            renderRow: (args) => {
+                args.container.attr.style["padding-left"] = "1rem";
+                args.container.attr.style["overflow"] = "hidden";
+                args.container.attr.style["display"] = "flex";
+                args.container.attr.style["align-items"] = "center";
+                args.container.children.push({
+                    tag: "input",
+                    attr: {
+                        id: id + "_" + args.index,
+                        checked: checkedValues[args.rowData.id[0]] ? "checked" : undefined,
+                        change: (_, node) => {
+                            if (node.dom.checked) {
+                                for (const selId of args.rowData.id) {
+                                    checkedValues[selId] = true;
+                                }
+                            }
+                            else {
+                                for (const selId of args.rowData.id) {
+                                    delete checkedValues[selId];
+                                }
+                            }
+                            // check if all values or none are checked
+                            const allChecked = Object.getOwnPropertyNames(checkedValues).length === sortedValues.length;
+                            const allCb = dlgBody.querySelector("#" + id);
+                            allCb.checked = allChecked;
+                        },
+                        type: "checkbox"
+                    }
+                });
+                args.container.children.push({
+                    tag: "label",
+                    attr: {
+                        for: id + "_" + args.index,
+                        style: "margin-left:0.2rem;cursor:pointer"
+                    },
+                    raw: true,
+                    content: args.rowData.txt
+                });
+            },
+            rowHeight,
+            style: "height:" + height + "px"
+        });
+        const renderer = new JSLRender(cbContainer, false);
+        renderer.render(vr);
+        search.addEventListener("input", (evt) => {
+            var _a;
+            const term = ((_a = evt.target.value) !== null && _a !== void 0 ? _a : "").toLowerCase();
+            if (term) {
+                visibleValues = sortedValues.filter((x) => { var _a; return ((_a = x.txt) !== null && _a !== void 0 ? _a : "").toLowerCase().indexOf(term) >= 0; });
+            }
+            else {
+                visibleValues = sortedValues;
+            }
+            vr.setData(visibleValues);
+            renderer.refresh();
+        });
+        cbAll.addEventListener("change", () => {
+            for (let i = 0; i < visibleValues.length; i++) {
+                // if (cbAll.checked) {
+                //     checkedValues[visibleValues[i].id] = true;
+                // } else {
+                //     delete checkedValues[visibleValues[i].id];
+                // }
+                if (cbAll.checked) {
+                    for (const selId of visibleValues[i].id) {
+                        checkedValues[selId] = true;
+                    }
+                }
+                else {
+                    for (const selId of visibleValues[i].id) {
+                        delete checkedValues[selId];
+                    }
+                }
+            }
+            renderer.refresh();
+        });
+        document.body.appendChild(dlg);
+        const dlgObj = Dialog(dlg, {
+            autoOpen: true, onClose: () => {
+                dlg.innerHTML = "";
+                dlg.parentElement.removeChild(dlg);
+            }
+        });
+        const dlgOkButton = dlg.querySelector(".dlg-footer .ok-button");
+        dlgOkButton.addEventListener("click", (evt) => {
+            const selLength = Object.getOwnPropertyNames(checkedValues).length;
+            const allChecked = selLength === sortedValues.length;
+            const anyChecked = selLength > 0;
+            this.grid.clearFilter(col.id, true);
+            if (!allChecked && anyChecked) {
+                // something (but not everything) was selected -> filter
+                const filterObject = {
+                    field: col.field, columnId: col.id, match: mode === "server" ? () => true : (item, field) => {
+                        return !!checkedValues[this.grid.getDataItemValueForColumn(item, col)];
+                    }
+                };
+                filterObject._checkedValues = checkedValues;
+                this.grid.addFilter(filterObject, true);
+            }
+            this.grid.refreshFilters();
+            dlgObj.close();
+        });
+        const dlgCancelButton = dlg.querySelector(".dlg-footer .close-button");
+        dlgCancelButton.addEventListener("click", (evt) => {
+            dlgObj.close();
+        });
+        const dlgClearButton = dlg.querySelector(".dlg-footer .clear-button");
+        if (dlgClearButton != null) {
+            dlgClearButton.addEventListener("click", (evt) => {
+                this.grid.clearFilter(col.id);
+                dlgObj.close();
+            });
+        }
+    }
+    // private updateStateOfAllCheckebox(dlgBody: HTMLElement, id: string) {
+    //     let counter = 0;
+    //     let el: HTMLInputElement;
+    //     const allCb: HTMLInputElement = dlgBody.querySelector("#" + id) as HTMLInputElement;
+    //     // tslint:disable-next-line: no-conditional-assignment
+    //     while (null != (el = dlgBody.querySelector("#" + id + "_" + counter) as HTMLInputElement)) {
+    //         if (el.parentElement.style.display !== "none" && !el.checked) {
+    //             allCb.checked = false;
+    //             return;
+    //         }
+    //         counter++;
+    //     }
+    //     allCb.checked = true;
+    // }
+    // private checkAllVisibleBoxes(el: HTMLElement, state: boolean) {
+    //     const checkboxes = el.querySelectorAll("input");
+    //     for (let i = 0; i < checkboxes.length; i++) {
+    //         if (checkboxes[i].type === "checkbox" &&
+    //             checkboxes[i].parentElement.style.display !== "none") {
+    //             checkboxes[i].checked = state;
+    //         }
+    //     }
+    // }
+    getDistinctValues(col) {
+        const textToValues = {};
+        for (let idx = 0, len = this.grid.getDataLength(); idx < len; idx++) {
+            const item = this.grid.getDataItem(idx);
+            const value = this.grid.getDataItemValueForColumn(item, col);
+            const text = this.grid.getFormattedValue(col, value, item);
+            let valueList = textToValues[text];
+            if (valueList == null) {
+                valueList = textToValues[text] = [];
+            }
+            if (valueList.indexOf(value) < 0) {
+                valueList.push(value);
+            }
+        }
+        return textToValues;
+    }
+}

package/lib/grid/plugins/ext.overlay.d.ts

@@ -1,2 +1,2 @@
-import "./ext.overlay.css";
-export declare function Overlays(options: any): void;
+import "./ext.overlay.css";
+export declare function Overlays(options: any): void;