jsl-ui 9.0.1 → 9.3.1

package/lib/components/dialog/DialogComponent.d.ts

@@ -1,6 +1,6 @@
 import { IJSLComponent, IJSLVNode } from "jsl-render";
 import { IDialogOptions, JSLDialog } from "../../ui/dialog";
-import { IMoveableOptions } from '../../interaction/moveable';
+import { IMoveableOptions } from "../../interaction/moveable";
 import { IResizeOptions } from "../../interaction/resizable";
 export interface IDialogComponentOptions extends IDialogOptions {
     width?: string;

package/lib/components/dialog/DialogComponent.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { JSLRender } from "jsl-render";
 import { Dialog } from "../../ui/dialog";
-import { Moveable } from '../../interaction/moveable';
+import { Moveable } from "../../interaction/moveable";
 import { EventHandler } from "../../interaction/eventhandler";
 import { Resizable } from "../../interaction/resizable";
 import { UILang } from "../../core/lang";

package/lib/components/ribbon-menu/RibbonMenuStyle.scss

@@ -7,6 +7,7 @@
     padding: 0.3rem;
     border-bottom: 1px solid #c9c9c9;
     border-top: 1px solid #c9c9c9;
+    flex-shrink: 0;
     background: linear-gradient(90deg,
         rgb(255,255,255) 0%,
         rgb(246,246,246) 20%,

package/lib/components/select/SelectComponent.d.ts

@@ -9,6 +9,10 @@ export interface ISelectRenderArg<T = any> {
     isSelected: boolean;
     isCurrent: boolean;
 }
+export interface ISelectRenderGroupArg {
+    groupValue: any;
+    node: IJSLVNode;
+}
 export interface ISelectComponentOptions<T = any, TValue = any, TBinding = any> {
     data: T[];
     style?: string;
@@ -25,6 +29,7 @@ export interface ISelectComponentOptions<T = any, TValue = any, TBinding = any>
     enableAnimation?: boolean;
     allowEmpty?: boolean;
     onRender?: (args: ISelectRenderArg<T>) => void | IJSLVNode;
+    onRenderGroup?: (args: ISelectRenderGroupArg) => void | IJSLVNode;
     matchSearch?: (data: T, term: string) => boolean;
     onAppend?: (dom: HTMLDivElement) => void;
     enableKeyboard?: boolean;
@@ -33,6 +38,7 @@ export interface ISelectComponentOptions<T = any, TValue = any, TBinding = any>
     bindTo?: TBinding;
     property?: keyof TBinding;
     converter?: IDataConverter<any, TValue>;
+    groupProperty?: keyof T;
     bindMode?: "toModel" | "fromModel" | "both";
     onChange?: EventHandler<TValue, T> | ((keyValue?: TValue, item?: T) => void);
     value?: TValue;

package/lib/components/select/SelectComponent.js

@@ -38,6 +38,9 @@ var SelectComponent = /** @class */ (function () {
             onAppend: function (dom) {
                 document.body.appendChild(dom);
             },
+            onRenderGroup: function (args) {
+                args.node.content = args.groupValue;
+            },
             onRender: o.multiple ? function (args) {
                 if (args.isCurrent) {
                     args.node.content = args.data.map(function (d) { return d[_this.options.textColumn]; }).join(", ");

package/lib/components/select/SelectDDAreaComponent.d.ts

@@ -16,6 +16,7 @@ export declare class SelectDDAreaComponent implements IJSLComponent {
     private static TAB_KEY;
     onRender: EventHandler<any[], void>;
     private filteredData;
+    private renderedData;
     private dom;
     private scrollContainer;
     private isScrolling;

package/lib/components/select/SelectDDAreaComponent.js

@@ -1,3 +1,10 @@
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 import { VirtualRenderComponent } from "../virtual-render/VirtualRenderComponent";
 import { EventHandler } from "../../interaction/eventhandler";
 function isInternetExplorer() {
@@ -17,7 +24,7 @@ var SelectDDAreaComponent = /** @class */ (function () {
     }
     SelectDDAreaComponent.prototype.onCreate = function (node) {
         var _this = this;
-        var _a;
+        var _a, _b;
         this.dom = node.dom;
         this.scrollContainer = this.dom.querySelector(".sel-dd-items");
         var item = this.component.getSelected();
@@ -26,7 +33,7 @@ var SelectDDAreaComponent = /** @class */ (function () {
                 item = item[0];
             }
             if (item != null) {
-                var d = (_a = this.filteredData, (_a !== null && _a !== void 0 ? _a : this.options.data));
+                var d = (_b = (_a = this.renderedData, (_a !== null && _a !== void 0 ? _a : this.filteredData)), (_b !== null && _b !== void 0 ? _b : this.options.data));
                 var idx = d.indexOf(item);
                 this.scrollContainer.scrollTop = this.options.rowHeight * idx;
             }
@@ -55,7 +62,27 @@ var SelectDDAreaComponent = /** @class */ (function () {
         var _this = this;
         var _a;
         var data = (_a = this.filteredData, (_a !== null && _a !== void 0 ? _a : this.options.data));
+        if (this.options.groupProperty != null) {
+            var sortedData = __spreadArrays(data);
+            sortedData.sort(function (a, b) {
+                return a[_this.options.groupProperty] < b[_this.options.groupProperty] ? -1
+                    : a[_this.options.groupProperty] > b[_this.options.groupProperty] ? 1 : (data.indexOf(a) - data.indexOf(b) // preserve order if it is for same group
+                    );
+            });
+            data = [];
+            var prevGroupVal = NaN;
+            for (var _i = 0, sortedData_1 = sortedData; _i < sortedData_1.length; _i++) {
+                var x = sortedData_1[_i];
+                if (x[this.options.groupProperty] !== prevGroupVal) {
+                    // create group entry
+                    data.push({ __isGroup: true, __groupValue: x[this.options.groupProperty] });
+                    prevGroupVal = x[this.options.groupProperty];
+                }
+                data.push(x);
+            }
+        }
         this.onRender.notify(data);
+        this.renderedData = data;
         var ddNode = {
             tag: "div", animation: this.options.enableAnimation ? { attr: "opacity", from: "0", to: "1", duration: 400 } : undefined, children: [
                 {
@@ -145,6 +172,23 @@ var SelectDDAreaComponent = /** @class */ (function () {
                     bufferSizeInPx: 20,
                     renderRow: function (args) {
                         var result = { tag: "div", attr: { class: "sel-dd-item" } };
+                        if (_this.options.groupProperty && args.rowData.__isGroup) {
+                            result.attr.class += " sel-dd-group";
+                            var groupValue = args.rowData.__groupValue;
+                            var groupArgs = {
+                                groupValue: groupValue, node: result
+                            };
+                            var resGroup = _this.options.onRenderGroup(groupArgs);
+                            if (resGroup != null) {
+                                result.children = [resGroup];
+                            }
+                            result.attr.mousedown = function (evt) {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                evt.stopImmediatePropagation();
+                            };
+                            return result;
+                        }
                         var renderArg = {
                             data: args.rowData,
                             node: result,
@@ -162,8 +206,8 @@ var SelectDDAreaComponent = /** @class */ (function () {
                         }
                         result.attr.mousedown = function (evt) {
                             if (_this.options.multiple) {
-                                evt.preventDefault(),
-                                    evt.stopPropagation();
+                                evt.preventDefault();
+                                evt.stopPropagation();
                                 evt.stopImmediatePropagation();
                                 var currentSelection = _this.component.getSelected();
                                 if (currentSelection.indexOf(args.rowData) >= 0) {
@@ -191,11 +235,11 @@ var SelectDDAreaComponent = /** @class */ (function () {
         return ddNode;
     };
     SelectDDAreaComponent.prototype.navigateDown = function () {
-        var _a, _b;
-        var d = (_a = this.filteredData, (_a !== null && _a !== void 0 ? _a : this.options.data));
-        var selItem = (_b = this.component.getFocus(), (_b !== null && _b !== void 0 ? _b : this.component.getSelected()));
+        var _a, _b, _c;
+        var d = (_b = (_a = this.renderedData, (_a !== null && _a !== void 0 ? _a : this.filteredData)), (_b !== null && _b !== void 0 ? _b : this.options.data));
+        var selItem = (_c = this.component.getFocus(), (_c !== null && _c !== void 0 ? _c : this.component.getSelected()));
         if (selItem == null) {
-            this.component.setFocus(d[0]);
+            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
             return;
         }
         if (Array.isArray(selItem)) {
@@ -203,33 +247,40 @@ var SelectDDAreaComponent = /** @class */ (function () {
         }
         var idx = d.indexOf(selItem);
         if (idx < 0) {
-            this.component.setFocus(d[0]);
+            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
         }
-        else if (idx < d.length - 1) {
-            this.component.setFocus(d[idx + 1]);
-            this.scrollContainer.scrollTop = this.options.rowHeight * idx;
-            // this.scrollContainer.scrollTop += this.options.rowHeight; // TODO: fune tuning needed when currently selected item is already outside of bounds
+        else {
+            while (idx < d.length - 1) {
+                idx++;
+                if (!d[idx].__isGroup) {
+                    this.component.setFocus(d[idx]);
+                    this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+                    break;
+                }
+            }
         }
     };
     SelectDDAreaComponent.prototype.navigateUp = function () {
-        var _a, _b;
-        var d = (_a = this.filteredData, (_a !== null && _a !== void 0 ? _a : this.options.data));
-        var selItem = (_b = this.component.getFocus(), (_b !== null && _b !== void 0 ? _b : this.component.getSelected()));
+        var _a, _b, _c;
+        var d = (_b = (_a = this.renderedData, (_a !== null && _a !== void 0 ? _a : this.filteredData)), (_b !== null && _b !== void 0 ? _b : this.options.data));
+        var selItem = (_c = this.component.getFocus(), (_c !== null && _c !== void 0 ? _c : this.component.getSelected()));
         if (selItem == null) {
-            this.component.setFocus(d[0]);
+            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
             return;
         }
         if (Array.isArray(selItem)) {
             selItem = selItem[0];
         }
         var idx = d.indexOf(selItem);
-        if (idx > 0) {
-            this.component.setFocus(d[idx - 1]);
-            this.scrollContainer.scrollTop = this.options.rowHeight * (idx - 1);
-            // this.scrollContainer.scrollTop -= this.options.rowHeight; // TODO: fune tuning needed when currently selected item is already outside of bounds
-            return;
+        while (idx > 0) {
+            idx--;
+            if (!d[idx].__isGroup) {
+                this.component.setFocus(d[idx]);
+                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+                return;
+            }
         }
-        this.component.setFocus(d[0]);
+        this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
     };
     SelectDDAreaComponent.prototype.search = function (term) {
         var _this = this;

package/lib/components/select/SelectStyle.scss

@@ -139,7 +139,7 @@
         }
     }
 
-    .sel-dd-item {
+    .sel-dd-item:not(.sel-dd-group) {
         &:hover {
             background: #d0d0d0;
         }
@@ -175,4 +175,13 @@
         height: 100%;
         line-height: 26px;
     }
+
+    .sel-dd-group {
+        font-weight: bold;
+        background: #e0e0e0;
+        text-align: center;
+        // &:hover {
+        //     background: #d0d0d0;
+        // }
+    }
 }

package/lib/core/helper.d.ts

@@ -2,6 +2,7 @@ export declare abstract class helper {
     static emptyGuid: string;
     static random(): number;
     static newGuid(): string;
+    static newSeqGuid(): string;
     static newDomGuid(): string;
     static isObject(obj: any): boolean;
     static isGuid(id: any): boolean;

package/lib/core/helper.js

@@ -7,6 +7,17 @@ var helper = /** @class */ (function () {
     helper.newGuid = function () {
         return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { var r = helper.random() * 16 | 0, v = c == "x" ? r : r & 0x3 | 0x8; return v.toString(16); });
     };
+    helper.newSeqGuid = function () {
+        var d = new Date().getTime().toString(16);
+        while (d.length < 12) {
+            d = "0" + d;
+        }
+        if (d.length > 12) {
+            d = d.substring(0, 12);
+        }
+        return "xxxxxxxx-xxxx-4xxx-yxxx-".replace(/[xy]/g, function (c) { var r = helper.random() * 16 | 0, v = c == "x" ? r : r & 0x3 | 0x8; return v.toString(16); })
+            + d;
+    };
     helper.newDomGuid = function () {
         return "axxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { var r = helper.random() * 16 | 0, v = c == "x" ? r : r & 0x3 | 0x8; return v.toString(16); });
     };

package/lib/grid/plugins/slick.cellexternalcopymanager.d.ts

@@ -0,0 +1 @@
+export declare function CellExternalCopyManager(options: any): void;