jsl-ui 9.18.3 → 9.18.4

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

@@ -0,0 +1,101 @@
+/* Menu button */
+.slick-header-menubutton {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 14px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-image: url('data:image/gif;base64,R0lGODlhDgAOAIABADtKYwAAACH5BAEAAAEALAAAAAAOAA4AAAISjI+py+0PHZgUsGobhTn6DxoFADs=');
+  cursor: pointer;
+
+  display: none;
+  border-left: thin ridge silver;
+}
+
+.slick-header-menubutton.resize-offset {
+  right: 0.5rem;
+}
+
+.slick-header-column:hover > .slick-header-menubutton,
+.slick-header-column-active .slick-header-menubutton {
+  display: inline-block;
+}
+
+/* Menu */
+.slick-header-menu {
+  position: absolute;
+  display: inline-block;
+  margin: 0;
+  padding: 2px;
+  cursor: default;
+}
+
+
+/* Menu items */
+.slick-header-menuitem {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.slick-header-menuicon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  margin-right: 4px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.slick-header-menucontent {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+
+/* Disabled */
+.slick-header-menuitem-disabled {
+  color: silver;
+}
+
+/* Divider */
+.slick-header-menuitem.slick-header-menuitem-divider {
+  cursor: default;
+  border: none;
+  overflow: hidden;
+  padding: 0;
+  height: 1px;
+  margin: 8px 2px;
+  background-color: #cecece;
+}
+.slick-header-menuitem-divider.slick-header-menuitem:hover {
+  background-color: #cecece;
+}
+
+.slick-header-menu {
+  border: 1px solid #bebebe;
+  background: #ffffff;
+  padding: 2px;
+  box-shadow: 2px 2px 2px silver;
+  z-index: 20;
+}
+
+
+.slick-header-menuitem {
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.slick-header-menuitem:hover {
+  background: #3B99FF;
+  color:white;
+}
+
+.slick-header-menuitem-disabled {
+  border-color: transparent !important;
+  background: inherit !important;
+}

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

@@ -0,0 +1,74 @@
+import './slick.headermenu.css';
+/***
+ * A plugin to add drop-down menus to column headers.
+ *
+ * USAGE:
+ *
+ * Add the plugin .js & .css files and register it with the grid.
+ *
+ * To specify a menu in a column header, extend the column definition like so:
+ *
+ *   var columns = [
+ *     {
+ *       id: 'myColumn',
+ *       name: 'My column',
+ *
+ *       // This is the relevant part
+ *       header: {
+ *          menu: {
+ *              items: [
+ *                {
+ *                  // menu item options
+ *                },
+ *                {
+ *                  // menu item options
+ *                }
+ *              ]
+ *          }
+ *       }
+ *     }
+ *   ];
+ *
+ *
+ * Available menu options:
+ *    tooltip:      Menu button tooltip.
+ *
+ *
+ * Available menu item options:
+ *    title:            Menu item text.
+ *    divider:          Whether the current item is a divider, not an actual command.
+ *    disabled:         Whether the item is disabled.
+ *    tooltip:          Item tooltip.
+ *    command:          A command identifier to be passed to the onCommand event handlers.
+ *    iconCssClass:     A CSS class to be added to the menu item icon.
+ *    iconImage:        A url to the icon image.
+ *    minWidth:         Minimum width that the drop menu will have
+ *    autoAlign:        Auto-align drop menu to the left when not enough viewport space to show on the right
+ *    autoAlignOffset:  When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left)
+ *
+ *
+ * The plugin exposes the following events:
+ *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            menu:     Menu options.  Note that you can change the menu items here.
+ *
+ *    onCommand:    Fired on menu item click for buttons with 'command' specified.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            command:  Button command identified.
+ *            button:   Button options.  Note that you can change the button options in your
+ *                      event handler, and the column header will be automatically updated to
+ *                      reflect them.  This is useful if you want to implement something like a
+ *                      toggle button.
+ *
+ *
+ * @param options {Object} Options:
+ *    buttonCssClass:   an extra CSS class to add to the menu button
+ *    buttonImage:      a url to the menu button image (default '../images/down.gif')
+ * @class Slick.Plugins.HeaderButtons
+ * @constructor
+ */
+export declare function HeaderMenu(options: any): void;

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

@@ -0,0 +1,260 @@
+import { jQueryReplacement } from "../../core/jq";
+import { Slick } from "../slick.core";
+import './slick.headermenu.css';
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Slick": {
+        "Plugins": {
+            "HeaderMenu": HeaderMenu
+        }
+    }
+});
+/***
+ * A plugin to add drop-down menus to column headers.
+ *
+ * USAGE:
+ *
+ * Add the plugin .js & .css files and register it with the grid.
+ *
+ * To specify a menu in a column header, extend the column definition like so:
+ *
+ *   var columns = [
+ *     {
+ *       id: 'myColumn',
+ *       name: 'My column',
+ *
+ *       // This is the relevant part
+ *       header: {
+ *          menu: {
+ *              items: [
+ *                {
+ *                  // menu item options
+ *                },
+ *                {
+ *                  // menu item options
+ *                }
+ *              ]
+ *          }
+ *       }
+ *     }
+ *   ];
+ *
+ *
+ * Available menu options:
+ *    tooltip:      Menu button tooltip.
+ *
+ *
+ * Available menu item options:
+ *    title:            Menu item text.
+ *    divider:          Whether the current item is a divider, not an actual command.
+ *    disabled:         Whether the item is disabled.
+ *    tooltip:          Item tooltip.
+ *    command:          A command identifier to be passed to the onCommand event handlers.
+ *    iconCssClass:     A CSS class to be added to the menu item icon.
+ *    iconImage:        A url to the icon image.
+ *    minWidth:         Minimum width that the drop menu will have
+ *    autoAlign:        Auto-align drop menu to the left when not enough viewport space to show on the right
+ *    autoAlignOffset:  When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left)
+ *
+ *
+ * The plugin exposes the following events:
+ *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            menu:     Menu options.  Note that you can change the menu items here.
+ *
+ *    onCommand:    Fired on menu item click for buttons with 'command' specified.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            command:  Button command identified.
+ *            button:   Button options.  Note that you can change the button options in your
+ *                      event handler, and the column header will be automatically updated to
+ *                      reflect them.  This is useful if you want to implement something like a
+ *                      toggle button.
+ *
+ *
+ * @param options {Object} Options:
+ *    buttonCssClass:   an extra CSS class to add to the menu button
+ *    buttonImage:      a url to the menu button image (default '../images/down.gif')
+ * @class Slick.Plugins.HeaderButtons
+ * @constructor
+ */
+export function HeaderMenu(options) {
+    var _grid;
+    var _self = this;
+    var _handler = new Slick.EventHandler();
+    var _defaults = {
+        buttonCssClass: null,
+        buttonImage: null,
+        minWidth: 100,
+        autoAlign: true,
+        autoAlignOffset: 0
+    };
+    var $menu;
+    var $activeHeaderColumn;
+    function init(grid) {
+        options = $.deepExtend({}, _defaults, options);
+        _grid = grid;
+        _handler
+            .subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
+            .subscribe(_grid.onBeforeHeaderCellDestroy, handleBeforeHeaderCellDestroy);
+        // Force the grid to re-render the header now that the events are hooked up.
+        //_grid.setColumns(_grid.getColumns()); //TODO TODOFIX try to optimize this
+        // Hide the menu on outside click.
+        $(document.body).on("mousedown", handleBodyMouseDown);
+    }
+    function setOptions(newOptions) {
+        options = $.deepExtend({}, options, newOptions);
+    }
+    function destroy() {
+        _handler.unsubscribeAll();
+        document.body.removeEventListener("mousedown", handleBodyMouseDown);
+        //$(document.body).off("mousedown", handleBodyMouseDown);
+    }
+    function handleBodyMouseDown(e) {
+        if ($menu && $(e.target).closestClass("slick-header-menu").length === 0) { //!$.contains($menu[0], e.target)) {
+            hideMenu();
+        }
+    }
+    function hideMenu() {
+        if ($menu) {
+            $menu.remove();
+            $menu = null;
+            $activeHeaderColumn
+                .removeClass("slick-header-column-active");
+        }
+    }
+    function handleHeaderCellRendered(e, args) {
+        var column = args.column;
+        var menu = $.deepExtend({}, (column.header && column.header.menu) || { items: [] });
+        if (!column.hideMenu) {
+            var $el = $("<div></div>")
+                .addClass("slick-header-menubutton")
+                .data("column", column)
+                .data("menu", menu);
+            if (column.resizable) {
+                $el.addClass("resize-offset");
+            }
+            if (options.buttonCssClass) {
+                $el.addClass(options.buttonCssClass);
+            }
+            if (options.buttonImage) {
+                $el.css("background-image", "url(" + options.buttonImage + ")");
+            }
+            if (menu.tooltip) {
+                $el.attr("title", menu.tooltip);
+            }
+            $el
+                .on("click", showMenu)
+                .appendTo(args.node);
+        }
+    }
+    function handleBeforeHeaderCellDestroy(e, args) {
+        var column = args.column;
+        if (column.header && column.header.menu) {
+            $(args.node).find(".slick-header-menubutton").remove();
+        }
+    }
+    function showMenu(e) {
+        var $menuButton = $(e.target);
+        var menu = $.deepExtend({}, $menuButton.data("menu"));
+        var columnDef = $menuButton.data("column");
+        // Let the user modify the menu or cancel altogether,
+        // or provide alternative menu implementation.
+        if (_self.onBeforeMenuShow.notify({
+            "grid": _grid,
+            "column": columnDef,
+            "menu": menu
+        }, e, _self) == false) {
+            return;
+        }
+        if (!$menu) {
+            $menu = $("<div class='slick-header-menu' style='min-width: " + options.minWidth + "px'></div>")
+                .appendTo(_grid.getContainerNode());
+        }
+        $menu.empty();
+        // Construct the menu items.
+        for (var i = 0; i < menu.items.length; i++) {
+            var item = menu.items[i];
+            var $li = $("<div class='slick-header-menuitem'></div>")
+                .data("command", item.command || '')
+                .data("column", columnDef)
+                .data("item", item)
+                .on("click", handleMenuItemClick)
+                .appendTo($menu);
+            if (item.disabled) {
+                $li.addClass("slick-header-menuitem-disabled");
+            }
+            if (item.divider) {
+                $li.addClass("slick-header-menuitem-divider");
+                continue;
+            }
+            if (item.tooltip) {
+                $li.attr("title", item.tooltip);
+            }
+            var $icon = $("<div class='slick-header-menuicon'></div>")
+                .appendTo($li);
+            if (item.iconCssClass) {
+                $icon.addClass(item.iconCssClass);
+            }
+            if (item.iconImage) {
+                $icon.css("background-image", "url(" + item.iconImage + ")");
+            }
+            $("<span class='slick-header-menucontent'></span>")
+                .text(item.title)
+                .appendTo($li);
+        }
+        var leftPos = $menuButton.offset().left;
+        // when auto-align is set, it will calculate whether it has enough space in the viewport to show the drop menu on the right (default)
+        // if there isn't enough space on the right, it will automatically align the drop menu to the left
+        // to simulate an align left, we actually need to know the width of the drop menu
+        if (options.autoAlign) {
+            var gridPos = _grid.getGridPosition();
+            if ((leftPos + options.minWidth) >= gridPos.width) {
+                leftPos = leftPos - options.minWidth + options.autoAlignOffset;
+            }
+        }
+        //$menu
+        //  .offset({ top: $menuButton.offset().top + $menuButton.height(), left: leftPos });
+        $menu[0].style.top = /*$menuButton.offset().top +*/ $menuButton.height() + "px";
+        $menu[0].style.left = (leftPos - $(_grid.getContainerNode()).offset().left) + "px";
+        // Mark the header as active to keep the highlighting.
+        $activeHeaderColumn = $menuButton.closestClass(".slick-header-column");
+        $activeHeaderColumn
+            .addClass("slick-header-column-active");
+        // Stop propagation so that it doesn't register as a header click event.
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    function handleMenuItemClick(e) {
+        var command = $(e.currentTarget).data("command");
+        var columnDef = $(e.currentTarget).data("column");
+        var item = $(e.currentTarget).data("item");
+        if (item.disabled || item.divider) {
+            return;
+        }
+        hideMenu();
+        if (command != null && command != '') {
+            _self.onCommand.notify({
+                "grid": _grid,
+                "column": columnDef,
+                "command": command,
+                "item": item
+            }, e, _self);
+        }
+        // Stop propagation so that it doesn't register as a header click event.
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    $.shallowExtend(this, {
+        "init": init,
+        "destroy": destroy,
+        "pluginName": "HeaderMenu",
+        "setOptions": setOptions,
+        "onBeforeMenuShow": new Slick.Event(),
+        "onCommand": new Slick.Event()
+    });
+}

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

@@ -0,0 +1,37 @@
+.detailView-toggle {
+    display:          inline-block;
+}
+
+.detailView-toggle.expand {
+    cursor:           pointer;
+    height:           20px;
+    width:            20px;
+    background: url(../images/arrow-right.gif) no-repeat center center;
+}
+
+.detailView-toggle.collapse {
+    cursor:           pointer;
+    height:           20px;
+    width:            20px;
+    background: url(../images/sort-desc.gif) no-repeat center center;
+}
+
+.dynamic-cell-detail {
+    z-index:            10000;
+    position:           absolute;
+    background-color:   #dae5e8;
+    margin:             0;
+    padding:            0;
+    width:              100%;
+    overflow:           auto;
+}
+
+.dynamic-cell-detail > :first-child {
+    vertical-align:     middle;
+    line-height:        13px;
+}
+
+.dynamic-cell-detail > .detail-container {
+    overflow: auto;
+    display: block !important;
+}

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;