jsl-ui 9.28.7 → 10.0.0

package/lib/grid/slick-default-theme.css

@@ -1,3 +1,4 @@
+@import "../ui/theme.css";
 /*
 IMPORTANT:
 In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
@@ -6,66 +7,73 @@ classes should alter those!
 */
 
 .slick-header-columns {
-  border-bottom: 2px solid silver;
+  border-bottom: 2px solid var(--jsl-color-border-subtle);
+  background: var(--jsl-color-surface-subtle);
 }
 
 .slick-header-column {
-  border-right: 1px solid silver;
-  text-align: center;
-  font-weight: bold;
+  border-right: 1px solid var(--jsl-color-border-subtle);
+  text-align: inherit;
+  font-weight: 600;
 }
 
 .slick-header-column:hover, .slick-header-column-active {
-  background: #3B99FF;
-  color: #ffffff;
+  background: var(--jsl-color-surface-hover);
+  color: var(--jsl-color-text);
 }
 
 
 .slick-header-column > .slick-header-menubutton:hover {
-  background-color: rgba(0,0,0,0.3);
+  background-color: var(--jsl-color-surface-selected);
 }
 
 .slick-headerrow {
-  background: #fafafa;
+  background: var(--jsl-color-surface-subtle);
 }
 
 .slick-headerrow-column {
-  background: #fafafa;
+  background: var(--jsl-color-surface-subtle);
   border-bottom: 0;
   height: 100%;
 }
 
 .slick-row.ui-state-active {
-  background: #F5F7D7;
+  background: var(--jsl-color-surface-selected);
 }
 
 .slick-row {
+  display: flex;
+  align-items: center;
   position: absolute;
-  background: white;
+  background: var(--jsl-color-surface);
   border: 0px;
-  line-height: 26px;
+  line-height: inherit;
 }
 
 /* what is this used for ? */
 .slick-row.selected {
   z-index: 10;
-  background: #DFE8F6;
+  background: var(--jsl-color-surface-selected);
 }
 
 .slick-cell {
+  align-content: center;
   padding-left: 4px;
   padding-right: 4px;
 }
 
 .slick-group {
-  border-bottom: 2px solid silver;
+  border-bottom: 2px solid var(--jsl-color-border-subtle);
 }
 
 .slick-group .slick-cell {
-  background:#D4E4EC;
+  display: flex;
+  align-items: center;
+  background: var(--jsl-color-surface-selected);
 }
 
 .slick-group-toggle {
+  flex-shrink: 0;
   width: 20px;
   height: 20px;
   vertical-align: middle;
@@ -73,16 +81,16 @@ classes should alter those!
 }
 
 .slick-group-toggle.expanded {
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 119.8'%3E%3Cpath d='M23.59,0h75.7a23.63,23.63,0,0,1,23.59,23.59V96.21A23.64,23.64,0,0,1,99.29,119.8H23.59a23.53,23.53,0,0,1-16.67-6.93l-.38-.42A23.49,23.49,0,0,1,0,96.21V23.59A23.63,23.63,0,0,1,23.59,0Zm59.7,53.51a6.39,6.39,0,1,1,0,12.77H39.59a6.39,6.39,0,1,1,0-12.77Zm16-40.74H23.59A10.86,10.86,0,0,0,12.77,23.59V96.21a10.77,10.77,0,0,0,2.9,7.37l.28.26A10.76,10.76,0,0,0,23.59,107h75.7a10.87,10.87,0,0,0,10.82-10.82V23.59A10.86,10.86,0,0,0,99.29,12.77Z'/%3E%3C/svg%3E") no-repeat center center;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 119.8'%3E%3Cpath d='M23.59,0h75.7a23.63,23.63,0,0,1,23.59,23.59V96.21A23.64,23.64,0,0,1,99.29,119.8H23.59a23.53,23.53,0,0,1-16.67-6.93l-.38-.42A23.49,23.49,0,0,1,0,96.21V23.59A23.63,23.63,0,0,1,23.59,0Zm59.7,53.51a6.39,6.39,0,1,1,0,12.77H39.59a6.39,6.39,0,1,1,0-12.77Zm16-40.74H23.59A10.86,10.86,0,0,0,12.77,23.59V96.21a10.77,10.77,0,0,0,2.9,7.37l.28.26A10.76,10.76,0,0,0,23.59,107h75.7a10.87,10.87,0,0,0,10.82-10.82V23.59A10.86,10.86,0,0,0,99.29,12.77Z'/%3E%3C/svg%3E") no-repeat center center; mask-size: contain; background-color: currentColor;
 }
 
 .slick-group-toggle.collapsed { 
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 122.88 119.72' style='enable-background:new 0 0 122.88 119.72' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M55.47,38.34c0-3.3,2.67-5.97,5.97-5.97 c3.3,0,5.97,2.67,5.97,5.97v15.55h15.55c3.3,0,5.97,2.67,5.97,5.97c0,3.3-2.67,5.97-5.97,5.97H67.41v15.55 c0,3.3-2.67,5.97-5.97,5.97c-3.3,0-5.97-2.67-5.97-5.97V65.83H39.91c-3.3,0-5.97-2.67-5.97-5.97c0-3.3,2.67-5.97,5.97-5.97h15.55 V38.34L55.47,38.34z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29 c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23 c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 122.88 119.72' style='enable-background:new 0 0 122.88 119.72' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M55.47,38.34c0-3.3,2.67-5.97,5.97-5.97 c3.3,0,5.97,2.67,5.97,5.97v15.55h15.55c3.3,0,5.97,2.67,5.97,5.97c0,3.3-2.67,5.97-5.97,5.97H67.41v15.55 c0,3.3-2.67,5.97-5.97,5.97c-3.3,0-5.97-2.67-5.97-5.97V65.83H39.91c-3.3,0-5.97-2.67-5.97-5.97c0-3.3,2.67-5.97,5.97-5.97h15.55 V38.34L55.47,38.34z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29 c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23 c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center; mask-size: contain; background-color: currentColor;
 }
 
 .slick-group-totals {
-  color: gray;
-  background: white;
+  color: var(--jsl-color-text-secondary);
+  background: var(--jsl-color-surface);
 }
 
 .slick-group-select-checkbox {
@@ -93,24 +101,24 @@ classes should alter those!
 }
 
 .slick-cell.selected {
-  background-color: #CDE6F7;
+  background-color: var(--jsl-color-surface-selected);
 }
 
 .slick-cell.active {
-  border-color: #017DBE;
+  border-color: var(--jsl-color-focus);
   border-style: solid;
 }
 
 .slick-sortable-placeholder {
-  background: silver !important;
+  background: var(--jsl-color-surface-selected) !important;
 }
 
 .slick-row.odd {
-  background: #ededed;
+  background: var(--jsl-color-surface-subtle);
 }
 
 .slick-row.ui-state-active {
-  background: #F5F7D7;
+  background: var(--jsl-color-surface-selected);
 }
 
 .slick-row.loading {
@@ -119,7 +127,7 @@ classes should alter those!
 }
 
 .slick-cell.invalid {
-  border-color: red;
+  border-color: var(--jsl-color-danger);
   animation-duration: 0.2s;
   -moz-animation-duration: 0.2s;
   -webkit-animation-duration: 0.2s;
@@ -129,28 +137,96 @@ classes should alter those!
 }
 
 @keyframes slickgrid-invalid-hilite {
-  from { box-shadow: 0 0 6px red; }
+  from { box-shadow: 0 0 6px var(--jsl-color-danger); }
   to { box-shadow: none; }
 }
 
 @-moz-keyframes slickgrid-invalid-hilite {
-  from { box-shadow: 0 0 6px red; }
+  from { box-shadow: 0 0 6px var(--jsl-color-danger); }
   to { box-shadow: none; }
 }
 
 @-webkit-keyframes slickgrid-invalid-hilite {
-  from { box-shadow: 0 0 6px red; }
+  from { box-shadow: 0 0 6px var(--jsl-color-danger); }
   to { box-shadow: none; }
 }
 
 /* .slick-grid {
-  background: white;
+  background: var(--jsl-color-surface);
   outline: 0;
   border: 1px solid #a0a0a0;
   border-radius: 3px;
 } */
 
 .new-row .slick-cell {
-  border-top: solid 1px #aaaaaa;
-  background: #3B99FF55;
+  border-top: solid 1px var(--jsl-color-border);
+  background: var(--jsl-color-surface-selected);
+}
+
+.slickgrid { font: inherit; color: var(--jsl-color-text); background: var(--jsl-color-surface); }
+
+/* Presentation only: preserve all measured cell and header dimensions. */
+
+
+.slick-row:not(.slick-group):not(.slick-group-totals) > .slick-cell:not(.active):not(.invalid):not(.flashing) { border-right-color: transparent; }
+
+
+
+/* These utilities also work when importing the standalone grid entry point. */
+.slickgrid .right { text-align: right; }
+.slickgrid .center { text-align: center; }
+.slickgrid .tabular-nums { font-variant-numeric: tabular-nums; }
+
+/* Override the legacy float rules that otherwise defeat header text alignment. */
+.slick-header-column .slick-column-name {
+  float: none;
+  margin-bottom: 0;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+.slick-header-sortable .slick-column-name { max-width: calc(100% - 1.25rem); }
+.slick-header-column .slick-sort-indicator,
+.slick-header-column .slick-sort-indicator-numbered {
+  display: inline-block;
+  float: none;
+  position: relative;
+  vertical-align: top;
+  margin: 0 0 0 .375rem;
+  height: var(--jsl-grid-header-height, 26px);
+  line-height: var(--jsl-grid-header-height, 26px);
+  color: var(--jsl-color-accent);
+}
+.slick-header-column .slick-sort-indicator { width: .65rem; }
+.slick-header-column.right .slick-sort-indicator,
+.slick-header-column.right .slick-sort-indicator-numbered { float: left; margin-left: 0; margin-right: .375rem; }
+.slick-sort-indicator-asc::before, .slick-sort-indicator-desc::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 5px;
+  background: currentColor;
+}
+.slick-sort-indicator-asc::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
+.slick-sort-indicator-desc::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
+.slick-header-column .slick-sort-indicator-numbered { width: auto; min-width: .65rem; font-size: .8em; }
+.slick-header-column .slick-sort-indicator.slick-sort-indicator-numbered { min-width: 1.5rem; padding-left: .75rem; }
+
+/* Draw inside frozen panes without changing widths or intercepting resize/scroll gestures. */
+.slickgrid:has(.slick-header-column.frozen) > .slick-pane-left::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  background: var(--jsl-color-border);
+  box-shadow: -2px 0 4px rgba(0, 0, 0, .08);
+  pointer-events: none;
+  z-index: 20;
 }

package/lib/grid/slick.creator.js

@@ -313,10 +313,26 @@ export function createJSLGrid(selector, data, columns, option) {
         const options = grid.getOptions();
         if (options.mode === "client") {
             grid.onSort.subscribe((e, args) => {
-                sort(args.sortCol, args.sortAsc);
+                var _a;
+                if (args.multiColumnSort) {
+                    const sorting = ((_a = args.sortCols) !== null && _a !== void 0 ? _a : []).map(item => ({
+                        compare: getColumnComparer(item.sortCol), direction: item.sortAsc ? 1 : -1
+                    }));
+                    dataView.sort((a, b) => {
+                        for (const item of sorting) {
+                            const result = item.compare(a, b);
+                            if (result !== 0) {
+                                return result * item.direction;
+                            }
+                        }
+                        return 0;
+                    }, true);
+                }
+                else if (args.sortCol) {
+                    sort(args.sortCol, args.sortAsc);
+                }
             });
         }
-        // TODO: multi column sort
     }
     function setupHeaderButtons() {
         headerButtons = new HeaderButtons({});
@@ -427,7 +443,7 @@ export function createJSLGrid(selector, data, columns, option) {
     function getHeight() {
         return $(container).height();
     }
-    function sort(column, sortAsc) {
+    function getColumnComparer(column) {
         function _comparer(a, b) {
             let x = grid.getDataItemValueForColumn(a, column);
             let y = grid.getDataItemValueForColumn(b, column);
@@ -456,8 +472,10 @@ export function createJSLGrid(selector, data, columns, option) {
             }
             return (xStr === yStr ? 0 : (xStr > yStr ? 1 : -1));
         }
-        const comparer = column.comparer || (column.sortByVisibleValue ? _visibleComparer : _comparer);
-        dataView.sort(comparer, sortAsc ? true : false);
+        return column.comparer || (column.sortByVisibleValue ? _visibleComparer : _comparer);
+    }
+    function sort(column, sortAsc) {
+        dataView.sort(getColumnComparer(column), sortAsc ? true : false);
     }
     function setData(newData) {
         data = newData;

package/lib/grid/slick.formatters.js

@@ -30,12 +30,12 @@ export let CheckmarkFormatter = function (row, cell, value, columnDef, dataConte
 };
 export let NumericFormatter = function (row, cell, value, columnDef, dataContext) {
     return {
-        addClasses: ["right"],
+        addClasses: ["right", "tabular-nums"],
         text: numeric.format(value, columnDef.format)
     };
 };
 export let DateFormatter = function (row, cell, value, columnDef, dataContext) {
-    return date.format(value, columnDef.format);
+    return { text: date.format(value, columnDef.format), addClasses: ["tabular-nums"] };
 };
 export let HtmlFormatter = function (row, cell, value, columnDef, dataContext) {
     return value || "";
@@ -136,7 +136,8 @@ export let TimeFormatter = function (row, cell, value, columnDef, dataContext) {
     return value ? (pad(value.getHours()) + ":" + pad(value.getMinutes())) : "";
 };
 export let DateTimeFormatter = function (row, cell, value, columnDef, dataContext) {
-    return DateFormatter(row, cell, value, columnDef, dataContext) + " " +
+    const formattedDate = DateFormatter(row, cell, value, columnDef, dataContext);
+    return (typeof formattedDate === "string" ? formattedDate : formattedDate.text) + " " +
         TimeFormatter(row, cell, value, columnDef, dataContext);
 };
 export let ButtonFormatter = function (row, cell, value, columnDef, dataContext) {

package/lib/grid/slick.grid.css

@@ -10,7 +10,7 @@ classes should alter those!
   overflow: auto;
   position: relative;
   border-left: 0px !important;
-  background: white;
+  background: var(--jsl-color-surface);
 }
 
 .slick-header.ui-state-default {
@@ -39,19 +39,29 @@ classes should alter those!
   line-height: 20px;
   margin: 0;
   padding: 4px;
-  border-right: 1px solid silver;
+  border-right: 1px solid var(--jsl-color-border-subtle);
   border-left: 0px !important;
-  border-top: 1px solid silver;
+  border-top: 1px solid var(--jsl-color-border-subtle);
   border-bottom: 0px !important;
   float: left;
 }
 
+/* Column headers are 6px taller; grouped headers retain their existing size. */
+.slick-header-column.ui-state-default {
+  height: var(--jsl-grid-header-height, 26px);
+  line-height: var(--jsl-grid-header-height, 26px);
+}
+
 .slick-footerrow-column.ui-state-default {
+  top: 0;
+  bottom: 0;
+  height: auto;
+  align-content: center;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   margin: 0;
   padding: 4px;
-  border-right: 1px solid silver;
+  border-right: 1px solid var(--jsl-color-border-subtle);
   border-left: 0px;
   border-top: 0px;
   border-bottom: 0px;
@@ -65,7 +75,7 @@ classes should alter those!
 }
 
 .slick-header-column-sorted {
-  font-style: italic;
+  font-style: inherit;
 }
 
 .slick-sort-indicator {
@@ -87,7 +97,7 @@ classes should alter those!
   float: left;
   font-style: normal;
   font-weight: bold;
-  color: #6190CD;
+  color: var(--jsl-color-text-secondary);
 }
 
 
@@ -113,7 +123,7 @@ classes should alter those!
 } */
 
 .slick-sortable-placeholder {
-  background: silver;
+  background: var(--jsl-color-surface-selected);
 }
 
 .grid-canvas {
@@ -128,26 +138,28 @@ classes should alter those!
 }
 
 .slick-cell, .slick-headerrow-column , .slick-footerrow-column{
+  /* SlickGrid measures content dimensions; host border-box resets must not apply. */
+  box-sizing: content-box !important;
   position: absolute;
   border: 1px solid transparent;
-  /*border-right: 1px dotted silver;
-  border-bottom-color: silver; */
-  border-right: 1px dotted silver;
+  /*border-right: 1px dotted var(--jsl-color-border-subtle);
+  border-bottom-color: var(--jsl-color-border-subtle); */
+  border-right: 1px dotted var(--jsl-color-border-subtle);
   overflow: hidden;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   vertical-align: middle;
   z-index: 1;
-  padding: 1px 2px 2px 1px;
+  padding: 1px 2px 1px 1px;
   margin: 0;
   white-space: nowrap;
   cursor: default;
 }
 /*.slick-cell, */.slick-headerrow-column{
-  border-bottom-color: silver;
+  border-bottom-color: var(--jsl-color-border-subtle);
 }
 .slick-footerrow-column {
-  border-top-color: silver;
+  border-top-color: var(--jsl-color-border-subtle);
 }
 
 .slick-group-toggle {
@@ -155,8 +167,8 @@ classes should alter those!
 }
 
 .slick-cell.highlighted {
-  background: lightskyblue;
-  background: rgba(0, 0, 255, 0.2);
+
+  background: var(--jsl-color-surface-selected);
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
@@ -164,13 +176,13 @@ classes should alter those!
 }
 
 .slick-cell.flashing {
-  border: 1px solid red !important;
+  border: 1px solid var(--jsl-color-danger) !important;
 }
 
 .slick-cell.editable {
   z-index: 11;
   overflow: visible;
-  /* background: white;
+  /* background: var(--jsl-color-surface);
   border-color: black;
   border-style: solid; */
 }
@@ -181,7 +193,7 @@ classes should alter those!
 
 .slick-reorder-proxy {
   display: inline-block;
-  background: blue;
+  background: var(--jsl-color-accent);
   opacity: 0.15;
   filter: alpha(opacity = 15);
   cursor: move;
@@ -190,7 +202,7 @@ classes should alter those!
 .slick-reorder-guide {
   display: inline-block;
   height: 2px;
-  background: blue;
+  background: var(--jsl-color-accent);
   opacity: 0.7;
   filter: alpha(opacity = 70);
 }
@@ -198,7 +210,7 @@ classes should alter those!
 .slick-selection {
   z-index: 10;
   position: absolute;
-  border: 2px dashed black;
+  border: 2px dashed var(--jsl-color-focus);
 }
 
 .slick-pane {
@@ -225,7 +237,7 @@ classes should alter those!
   position: relative;
   outline: 0;
   width: 100%;
-  background: white;
+  background: var(--jsl-color-surface);
 }
 
 .slick-wrap {
@@ -258,7 +270,7 @@ input.editor-text, textarea.editor-text {
 
 .slickgrid {
   box-sizing: border-box;
-  border: solid 1px #b0b0b0;
+  border: solid 1px var(--jsl-color-border);
   border-radius: 3px;
 }
 
@@ -269,8 +281,8 @@ input.editor-text, textarea.editor-text {
 }
 
 .slick-ghost-content {
-  border: solid 2px #bbbbbb;
-  background: rgba(200,200,200,0.5);
+  border: solid 2px var(--jsl-color-border);
+  background: var(--jsl-color-surface-selected);
   position: absolute;
   left: 0;
   right: 0;
@@ -281,8 +293,8 @@ input.editor-text, textarea.editor-text {
 }
 
 .slick-filtered-header {
-  color: #3B99FF;
-  background: #e7e7e7;
+  color: var(--jsl-color-accent);
+  background: var(--jsl-color-surface-selected);
 }
 
 .slick-preheader-panel .slick-column-name {

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

@@ -272,6 +272,7 @@ export interface ISlickGrid<T> {
         width: number;
     };
     "canCellBeSelected": (row: number, cell: number) => boolean;
+    "getFooterRowColumn": (columnIdOrIdx: string | number) => HTMLElement;
     "getGridPosition": () => {
         top: number;
         left: number;

package/lib/grid/slick.grid.js

@@ -28,7 +28,7 @@ export function SlickGrid(container, data, columns, options) {
         alwaysShowHorizontalScroll: false,
         alwaysAllowHorizontalScroll: false,
         explicitInitialization: false,
-        rowHeight: 28,
+        rowHeight: 36,
         defaultColumnWidth: 80,
         enableAddRow: false,
         leaveSpaceForNewRows: false,
@@ -999,8 +999,7 @@ export function SlickGrid(container, data, columns, options) {
         else {
             $footerRowTarget = $footerRowL;
         }
-        var $footer = $footerRowTarget.children().eq(idx);
-        return $footer && $footer[0];
+        return $footerRowTarget.children()[idx];
     }
     function createColumnFooter() {
         if (options.createFooterRow) {