jsl-ui 9.8.3 → 9.10.0

package/lib/components/overlay/OverlayComponent.d.ts

@@ -0,0 +1,27 @@
+import "./overlay.css";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IOverlayComponentOptions {
+    content: IJSLVNode | string | IJSLComponent;
+    showCloseButton?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOverlayClick?: boolean;
+    onClose?: () => void | boolean;
+    onOpen?: () => void;
+    animate?: boolean;
+    direction?: "left" | "top";
+    size?: string;
+    class?: string;
+    style?: string;
+}
+export declare class OverlayComponent implements IJSLComponent {
+    static show(options: IOverlayComponentOptions): OverlayComponent;
+    private static lastRenderedDlg;
+    private closeIcon;
+    private onKeydownEvent;
+    close(): void;
+    private options;
+    constructor(options: IOverlayComponentOptions);
+    onCreate(node: IJSLVNode): void;
+    render(): IJSLVNode;
+    private toNode;
+}

package/lib/components/overlay/OverlayComponent.js

@@ -0,0 +1,149 @@
+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 "./overlay.css";
+import { JSLRender } from "jsl-render";
+var OverlayComponent = /** @class */ (function () {
+    function OverlayComponent(options) {
+        var _this = this;
+        this.closeIcon = {
+            tag: "div", content: "🗙", attr: {
+                class: "overl-close-btn", click: function () {
+                    _this.close();
+                }
+            }
+        };
+        this.options = __assign({ closeOnEscape: true, closeOnOverlayClick: true, showCloseButton: true, direction: "left", animate: true }, options);
+        if (this.options.closeOnEscape) {
+            this.onKeydownEvent = document.addEventListener("keydown", function (args) {
+                if (args.keyCode === 27) { // escape
+                    _this.close();
+                }
+            });
+        }
+    }
+    OverlayComponent.show = function (options) {
+        var container = document.createElement("div");
+        document.body.appendChild(container);
+        var oldRenderer = JSLRender.lastCreatedRenderer;
+        var oldLastDlg = OverlayComponent.lastRenderedDlg;
+        var renderer = new JSLRender(container, oldRenderer != null);
+        if (oldRenderer != null) {
+            JSLRender.lastCreatedRenderer = renderer;
+        }
+        var o = __assign({}, options);
+        o.onClose = function () {
+            if (options.onClose) {
+                if (options.onClose() === false) {
+                    return;
+                }
+            }
+            document.body.removeChild(container);
+            JSLRender.lastCreatedRenderer = oldRenderer;
+            if (oldRenderer != null) {
+                oldRenderer.refresh();
+            }
+            OverlayComponent.lastRenderedDlg = oldLastDlg;
+        };
+        var dlg = new OverlayComponent(o);
+        OverlayComponent.lastRenderedDlg = dlg;
+        renderer.render(dlg);
+        return dlg;
+    };
+    OverlayComponent.prototype.close = function () {
+        if (this.options.onClose) {
+            if (this.options.onClose() === false) {
+                return;
+            }
+        }
+        // this.overlay.style.display = "none";
+        if (this.onKeydownEvent != null) {
+            document.removeEventListener("keydown", this.onKeydownEvent);
+        }
+    };
+    OverlayComponent.prototype.onCreate = function (node) {
+        var bodyDom = node.dom.querySelector(".overl-body");
+        if (bodyDom != null) {
+            if (this.options.direction === "left") {
+                node.dom.style.width = this.options.size;
+                if (this.options.animate) {
+                    var realWidth = bodyDom.getBoundingClientRect().width;
+                    node.dom.style.left = -realWidth + "px";
+                    JSLRender.animate(node, { attr: "left", from: -realWidth + "px", to: "0px", duration: 500, easing: "easeOutSine" });
+                }
+            }
+            else {
+                node.dom.style.height = this.options.size;
+                if (this.options.animate) {
+                    var realHeight = bodyDom.getBoundingClientRect().height;
+                    node.dom.style.top = -realHeight + "px";
+                    JSLRender.animate(node, { attr: "top", from: -realHeight + "px", to: "0px", duration: 500, easing: "easeOutSine" });
+                }
+            }
+        }
+        else {
+            console.error("overl-body class not found");
+        }
+    };
+    OverlayComponent.prototype.render = function () {
+        var _this = this;
+        var body = this.toNode(this.options.content);
+        // let styleW = "";
+        // let styleH = "";
+        // if (this.options.width != null) {
+        //     styleW += "width:" + this.options.width + ";";
+        // }
+        // if (this.options.minWidth != null) {
+        //     styleW += "min-width:" + this.options.minWidth + ";";
+        // }
+        // if (this.options.maxWidth != null) {
+        //     styleW += "max-width:" + this.options.maxWidth + ";";
+        // }
+        // if (this.options.height != null) {
+        //     styleH += "height:" + this.options.height + ";";
+        // }
+        // if (this.options.minHeight != null) {
+        //     styleH += "min-height:" + this.options.minHeight + ";";
+        // }
+        // if (this.options.maxHeight != null) {
+        //     styleH += "max-height:" + this.options.maxHeight + ";";
+        // }
+        // const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
+        return {
+            tag: "div", attr: {
+                class: "jsl-overlay-overlay", click: function (e) {
+                    if (_this.options.closeOnOverlayClick && e.target.classList.contains("jsl-overlay-overlay")) {
+                        _this.close();
+                    }
+                }, wheel: function (e) {
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
+                }
+            }, children: [
+                {
+                    tag: "div", attr: { class: ("overl-body-" + this.options.direction) + " overl-body " + (this.options.class || ""), style: this.options.style }, children: [{
+                            tag: "div", attr: { class: "overl-header" },
+                            children: this.options.showCloseButton ? [this.closeIcon] : []
+                        }, body]
+                }
+            ]
+            // }]
+        };
+    };
+    OverlayComponent.prototype.toNode = function (content) {
+        if (typeof content === "string") {
+            return { tag: "div", content: content };
+        }
+        return content;
+    };
+    return OverlayComponent;
+}());
+export { OverlayComponent };

package/lib/components/overlay/overlay.css

@@ -0,0 +1,57 @@
+.jsl-overlay-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 2001;
+    background: rgba(255, 255, 255, 0.6);
+    height: 100vh;
+}
+
+.overl-header {
+    position:absolute;
+    right: 0;
+    top: 0;
+}
+
+.overl-body {
+    position: absolute;
+    overflow: auto;
+    background: rgb(255, 255, 255);
+}
+
+.overl-body-left {
+    left:0;
+    top:0;
+    bottom:0;
+    min-width: 50%;
+    box-shadow: 5px 0px 6px 0px rgba(34, 34, 34, 0.2);
+}
+
+.overl-body-top {
+    left:0;
+    top:0;
+    right:0;
+    min-height: 50%;
+    box-shadow: 0px 5px 4px 0px rgba(34,34,34,0.2);
+}
+
+
+.overl-close-btn {
+    color: #555555;
+    font-size: 2rem;
+    line-height: 2.2rem;
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 2.2rem;
+    box-sizing: border-box;
+    border-top-right-radius: 0.8rem;
+    cursor: pointer;
+}
+
+.overl-close-btn:hover {
+    color: #B22121;
+}

package/lib/components/stack-panel/StackPanelStyle.scss

@@ -16,6 +16,10 @@
   width: 100%;
 }
 
+.stackpanel-comp.hstackpanel:not(.responsive) > div {
+  display: flex;
+}
+
 @media (min-width: 70em) {
 
   .stackpanel-comp.hstackpanel {

package/lib/components/tabs/TabsComponent.js

@@ -15,13 +15,13 @@ var TabsComponent = /** @class */ (function () {
         this.options = options;
         this.State = { selectedIndex: null };
         this.options = (_a = this.options) !== null && _a !== void 0 ? _a : {};
-        this.checkForDuplicateIds();
         this.options.tabs = (_b = this.options.tabs) !== null && _b !== void 0 ? _b : [];
         this.options.selectedIndex = (_c = this.options.selectedIndex) !== null && _c !== void 0 ? _c : 0;
     }
     TabsComponent.prototype.render = function () {
         var _this = this;
         var _a, _b, _c, _d, _e;
+        this.checkForDuplicateIds();
         var index = -1;
         var activeIndex = (_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex;
         if (activeIndex > -1 &&

package/lib/core/jq.d.ts

@@ -30,8 +30,8 @@ export interface IjQueryWrapper {
 }
 export interface IjQueryReplacement {
     (selector?: string | HTMLElement | Document): IjQueryWrapper;
-    deepExtend?: (out: any, ...a: any[]) => any;
-    shallowExtend?: (out: any, ...a: any[]) => any;
-    each?: (array: any[] | IjQueryWrapper, fnc: (idx: number, val: any) => void) => void;
+    deepExtend: (out: any, ...a: any[]) => any;
+    shallowExtend: (out: any, ...a: any[]) => any;
+    each: (array: any[] | IjQueryWrapper, fnc: (idx: number, val: any) => void) => void;
 }
-export declare let jQueryReplacement: IjQueryReplacement;
+export declare let jQueryReplacement: ((selector?: string | HTMLElement) => IjQueryWrapper) & IjQueryReplacement;

package/lib/core/jq.js

@@ -309,7 +309,7 @@ function jQWrapper(elements) {
     };
     return _elements;
 }
-export var jQueryReplacement = function (selector) {
+var jqueryCreate = function (selector) {
     var elements = [];
     if (typeof selector === "string") {
         if (selector[0] === '<') {
@@ -336,13 +336,12 @@ export var jQueryReplacement = function (selector) {
     }
     return jQWrapper(elements);
 };
-jQueryReplacement.deepExtend = deepExtend;
-jQueryReplacement.each = function (array, fnc) {
+function each(array, fnc) {
     for (var i = 0; i < array.length; i++) {
         fnc(i, array[i]);
     }
-};
-jQueryReplacement.shallowExtend = function (out) {
+}
+function shallowExtend(out) {
     var rest = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         rest[_i - 1] = arguments[_i];
@@ -357,4 +356,8 @@ jQueryReplacement.shallowExtend = function (out) {
         }
     }
     return out;
-};
+}
+jqueryCreate.deepExtend = deepExtend;
+jqueryCreate.each = each;
+jqueryCreate.shallowExtend = shallowExtend;
+export var jQueryReplacement = jqueryCreate;

package/lib/grid/plugins/slick.rowmovemanager.css

@@ -0,0 +1,8 @@
+.cell-reorder {
+    cursor: move;
+    /* background: red; */
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAADAFBMVEUAAACWlpbY2NgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmpIfcAAABAHRSTlP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AU/cHJQAAABlJREFUCNdj+I8EGFA5jHAA5DDBAW2VIQEAmyRUB6U7kZIAAAAASUVORK5CYII=);
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: center;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Row Move Manager options:
+ *    cssClass:                 A CSS class to be added to the menu item container.
+ *    columnId:                 Column definition id (defaults to "_move")
+ *    cancelEditOnDrag:         Do we want to cancel any Editing while dragging a row (defaults to false)
+ *    disableRowSelection:      Do we want to disable the row selection? (defaults to false)
+ *    hideRowMoveShadow:        Do we want to hide the row move shadow clone? (defaults to true)
+ *    rowMoveShadowMarginTop:   When row move shadow is shown, optional margin-top (defaults to 0)
+ *    rowMoveShadowMarginLeft:  When row move shadow is shown, optional margin-left (defaults to 0)
+ *    rowMoveShadowOpacity:     When row move shadow is shown, what is its opacity? (defaults to 0.95)
+ *    rowMoveShadowScale:       When row move shadow is shown, what is its size scale? (default to 0.75)
+ *    singleRowMove:            Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false)
+ *    width:                    Width of the column
+ *    usabilityOverride:        Callback method that user can override the default behavior of the row being moveable or not
+ *
+ */
+import "./slick.rowmovemanager.css";
+export declare function RowMoveManager(options: any): void;

package/lib/grid/plugins/slick.rowmovemanager.js

@@ -0,0 +1,249 @@
+/**
+ * Row Move Manager options:
+ *    cssClass:                 A CSS class to be added to the menu item container.
+ *    columnId:                 Column definition id (defaults to "_move")
+ *    cancelEditOnDrag:         Do we want to cancel any Editing while dragging a row (defaults to false)
+ *    disableRowSelection:      Do we want to disable the row selection? (defaults to false)
+ *    hideRowMoveShadow:        Do we want to hide the row move shadow clone? (defaults to true)
+ *    rowMoveShadowMarginTop:   When row move shadow is shown, optional margin-top (defaults to 0)
+ *    rowMoveShadowMarginLeft:  When row move shadow is shown, optional margin-left (defaults to 0)
+ *    rowMoveShadowOpacity:     When row move shadow is shown, what is its opacity? (defaults to 0.95)
+ *    rowMoveShadowScale:       When row move shadow is shown, what is its size scale? (default to 0.75)
+ *    singleRowMove:            Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false)
+ *    width:                    Width of the column
+ *    usabilityOverride:        Callback method that user can override the default behavior of the row being moveable or not
+ *
+ */
+import "./slick.rowmovemanager.css";
+import { jQueryReplacement } from "../../core/jq";
+import { Slick } from "../slick.core";
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Slick": {
+        "RowMoveManager": RowMoveManager
+    }
+});
+export function RowMoveManager(options) {
+    var _grid;
+    var _canvas;
+    var _dragging;
+    var _self = this;
+    var _usabilityOverride = null;
+    var _handler = new Slick.EventHandler();
+    var _defaults = {
+        columnId: "_move",
+        cssClass: null,
+        cancelEditOnDrag: false,
+        disableRowSelection: false,
+        hideRowMoveShadow: true,
+        rowMoveShadowMarginTop: 0,
+        rowMoveShadowMarginLeft: 0,
+        rowMoveShadowOpacity: 0.95,
+        rowMoveShadowScale: 0.75,
+        singleRowMove: false,
+        width: 40,
+    };
+    // user could override the expandable icon logic from within the options or after instantiating the plugin
+    if (options && typeof options.usabilityOverride === 'function') {
+        usabilityOverride(options.usabilityOverride);
+    }
+    function init(grid) {
+        options = $.deepExtend({}, _defaults, options);
+        _grid = grid;
+        _canvas = _grid.getCanvasNode();
+        _handler
+            .subscribe(_grid.onDragInit, handleDragInit)
+            .subscribe(_grid.onDragStart, handleDragStart)
+            .subscribe(_grid.onDrag, handleDrag)
+            .subscribe(_grid.onDragEnd, handleDragEnd);
+    }
+    function destroy() {
+        _handler.unsubscribeAll();
+    }
+    function setOptions(newOptions) {
+        options = $.shallowExtend({}, options, newOptions);
+    }
+    function handleDragInit(e) {
+        // prevent the grid from cancelling drag'n'drop by default
+        e.stopImmediatePropagation();
+    }
+    function handleDragStart(e, dd) {
+        var cell = _grid.getCellFromEvent(e);
+        var currentRow = cell && cell.row;
+        var dataContext = _grid.getDataItem(currentRow);
+        if (!checkUsabilityOverride(currentRow, dataContext, _grid)) {
+            return;
+        }
+        if (options.cancelEditOnDrag && _grid.getEditorLock().isActive()) {
+            _grid.getEditorLock().cancelCurrentEdit();
+        }
+        if (_grid.getEditorLock().isActive() || !isHandlerColumn(cell.cell)) {
+            return false;
+        }
+        _dragging = true;
+        e.stopImmediatePropagation();
+        // optionally create a shadow element of the row so that we can see all the time which row exactly we're dragging
+        if (!options.hideRowMoveShadow) {
+            var $slickRowElm = $(_grid.getCellNode(cell.row, cell.cell)).closestClass('slick-row');
+            if ($slickRowElm.length) {
+                dd.clonedSlickRow = $($slickRowElm[0].cloneNode(true))
+                    .addClass('slick-reorder-shadow-row')
+                    .css("marginTop", options.rowMoveShadowMarginTop || 0)
+                    .css("marginLeft", options.rowMoveShadowMarginLeft || 0)
+                    .css("opacity", options.rowMoveShadowOpacity || 0.95)
+                    .css("transform", "scale(" + options.rowMoveShadowScale + ")")
+                    .css("display", "none")
+                    .appendTo(_canvas);
+            }
+        }
+        var selectedRows = options.singleRowMove ? [cell.row] : _grid.getSelectedRows();
+        if (selectedRows.length === 0 || selectedRows.indexOf(cell.row) === -1) {
+            selectedRows = [cell.row];
+            if (!options.disableRowSelection) {
+                _grid.setSelectedRows(selectedRows);
+            }
+        }
+        var rowHeight = _grid.getOptions().rowHeight;
+        dd.selectedRows = selectedRows;
+        var canvasWidth = _canvas.getBoundingClientRect().width;
+        dd.selectionProxy = $(document.createElement("div")) //"<div class='slick-reorder-proxy'/>")
+            .addClass("slick-reorder-proxy")
+            .css("position", "absolute")
+            .css("zIndex", "99999")
+            .css("width", canvasWidth) // $(_canvas).innerWidth())
+            .css("height", rowHeight * selectedRows.length)
+            .css("display", "none")
+            .appendTo(_canvas);
+        dd.guide = $(document.createElement("div")) // "<div class='slick-reorder-guide'/>")
+            .addClass("slick-reorder-guide")
+            .css("position", "absolute")
+            .css("zIndex", "99998")
+            .css("width", canvasWidth)
+            .css("top", -1000)
+            .appendTo(_canvas);
+        dd.insertBefore = -1;
+    }
+    function handleDrag(e, dd) {
+        if (!_dragging) {
+            return;
+        }
+        // e.preventDefault();
+        e.stopImmediatePropagation();
+        var top = dd.pageY - $(_canvas).offset().top;
+        dd.selectionProxy.css("top", top - 5).css("display", ""); //.show();
+        // if the row move shadow is enabled, we'll also make it follow the mouse cursor
+        if (dd.clonedSlickRow) {
+            var offsetY = dd.pageY - $(_canvas).offset().top;
+            dd.clonedSlickRow.css("top", offsetY - 6).css("display", ""); //.show();
+        }
+        var insertBefore = Math.max(0, Math.min(Math.round(top / _grid.getOptions().rowHeight), _grid.getDataLength()));
+        if (insertBefore !== dd.insertBefore) {
+            var eventData = {
+                "grid": _grid,
+                "rows": dd.selectedRows,
+                "insertBefore": insertBefore
+            };
+            if (_self.onBeforeMoveRows.notify(eventData) === false) {
+                dd.canMove = false;
+            }
+            else {
+                dd.canMove = true;
+            }
+            // if there's a UsabilityOverride defined, we also need to verify that the condition is valid
+            if (_usabilityOverride && dd.canMove) {
+                var insertBeforeDataContext = _grid.getDataItem(insertBefore);
+                dd.canMove = checkUsabilityOverride(insertBefore, insertBeforeDataContext, _grid);
+            }
+            // if the new target is possible we'll display the dark blue bar (representin the acceptability) at the target position
+            // else it won't show up (it will be off the screen)
+            if (!dd.canMove) {
+                dd.guide.css("top", -1000);
+            }
+            else {
+                dd.guide.css("top", insertBefore * _grid.getOptions().rowHeight);
+            }
+            dd.insertBefore = insertBefore;
+        }
+    }
+    function handleDragEnd(e, dd) {
+        if (!_dragging) {
+            return;
+        }
+        _dragging = false;
+        e.stopImmediatePropagation();
+        if (dd.guide == null) {
+            console.log("dd.guide");
+        }
+        else
+            dd.guide.remove();
+        if (dd.selectionProxy == null) {
+            console.log(" dd.selectionProxy");
+        }
+        else
+            dd.selectionProxy.remove();
+        if (dd.clonedSlickRow) {
+            dd.clonedSlickRow.remove();
+            dd.clonedSlickRow = null;
+        }
+        if (dd.canMove) {
+            var eventData = {
+                "grid": _grid,
+                "rows": dd.selectedRows,
+                "insertBefore": dd.insertBefore
+            };
+            // TODO:  _grid.remapCellCssClasses ?
+            _self.onMoveRows.notify(eventData);
+        }
+    }
+    function getColumnDefinition() {
+        return {
+            id: options.columnId || "_move",
+            name: "",
+            field: "move",
+            width: options.width || 40,
+            behavior: "selectAndMove",
+            selectable: false,
+            resizable: false,
+            cssClass: options.cssClass,
+            formatter: moveIconFormatter
+        };
+    }
+    function moveIconFormatter(row, cell, value, columnDef, dataContext, grid) {
+        if (!checkUsabilityOverride(row, dataContext, grid)) {
+            return null;
+        }
+        else {
+            return { addClasses: "cell-reorder dnd", text: "" };
+        }
+    }
+    function checkUsabilityOverride(row, dataContext, grid) {
+        if (typeof _usabilityOverride === 'function') {
+            return _usabilityOverride(row, dataContext, grid);
+        }
+        return true;
+    }
+    /**
+     * Method that user can pass to override the default behavior or making every row moveable.
+     * In order word, user can choose which rows to be an available as moveable (or not) by providing his own logic show/hide icon and usability.
+     * @param overrideFn: override function callback
+     */
+    function usabilityOverride(overrideFn) {
+        _usabilityOverride = overrideFn;
+    }
+    function isHandlerColumn(columnIndex) {
+        return /move|selectAndMove/.test(_grid.getColumns()[columnIndex].behavior);
+    }
+    $.shallowExtend(this, {
+        "onBeforeMoveRows": new Slick.Event(),
+        "onMoveRows": new Slick.Event(),
+        "init": init,
+        "destroy": destroy,
+        "getColumnDefinition": getColumnDefinition,
+        "setOptions": setOptions,
+        "usabilityOverride": usabilityOverride,
+        "isHandlerColumn": isHandlerColumn,
+        "pluginName": "RowMoveManager"
+    });
+}
+// })(jQuery);

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

@@ -75,6 +75,7 @@ export interface ISlickColumn {
     asyncPostRenderCleanup?: (node: HTMLElement, row: number, column: ISlickColumn) => void;
     cannotTriggerInsert?: boolean;
     groupTotalsFormatter?: (item: any, columnDef: ISlickColumn, grid: any) => string | ISlickFormatterResult;
+    behavior?: string;
 }
 export declare let Slick: ISlick;
 /***

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

@@ -15,6 +15,7 @@ export interface ISlickCreatorOptions extends ISlickGridOptions {
         [key: string]: any[];
     } | any[]>;
     showFilterDialog?: (column: ISlickColumn, grid: IJSLGrid<any>) => void;
+    allowRowMove?: boolean;
 }
 export interface IJSLGrid<T> extends ISlickGrid<T> {
     dataView: ISlickDataView<T>;

package/lib/grid/slick.creator.js

@@ -9,6 +9,7 @@ import { HeaderButtons } from "./plugins/slick.headerbuttons";
 import { TextFormatter } from "./slick.formatters";
 import { ExcelFilter } from "./filterDialogs/excelFilter";
 import { UILang } from "../core/lang";
+import { RowMoveManager } from "./plugins/slick.rowmovemanager";
 var $ = jQueryReplacement;
 export function createJSLGrid(selector, data, columns, option) {
     var formulaObjects = [];
@@ -60,6 +61,50 @@ export function createJSLGrid(selector, data, columns, option) {
             setupHeaderMenu();
         }
         setupHeaderButtons();
+        if (options.allowRowMove) {
+            var rowMovePlugin = new RowMoveManager({
+                cancelEditOnDrag: true,
+                singleRowMove: true,
+                disableRowSelection: true,
+                hideRowMoveShadow: false,
+                rowMoveShadowScale: 0.7,
+                rowMoveShadowOpacity: 0.9 // defaults to 0.95
+            });
+            grid.registerPlugin(rowMovePlugin);
+            rowMovePlugin.onBeforeMoveRows.subscribe(function (e, args) {
+                // debugger;
+            });
+            rowMovePlugin.onMoveRows.subscribe(function (e, args) {
+                var extractedRows = [], left, right;
+                var rows = args.rows;
+                var insertBefore = args.insertBefore;
+                left = data.slice(0, insertBefore);
+                right = data.slice(insertBefore, data.length);
+                rows.sort(function (a, b) { return a - b; });
+                for (var i = 0; i < rows.length; i++) {
+                    extractedRows.push(data[rows[i]]);
+                }
+                rows.reverse();
+                for (var i = 0; i < rows.length; i++) {
+                    var row = rows[i];
+                    if (row < insertBefore) {
+                        left.splice(row, 1);
+                    }
+                    else {
+                        right.splice(row - insertBefore, 1);
+                    }
+                }
+                data = left.concat(extractedRows.concat(right));
+                var selectedRows = [];
+                for (var i = 0; i < rows.length; i++)
+                    selectedRows.push(left.length + i);
+                // grid.resetActiveCell();
+                dataView.beginUpdate();
+                dataView.setItems(data);
+                dataView.endUpdate();
+                grid.render();
+            });
+        }
         if (!option.explicitInitialization) {
             grid.init();
         }