Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
slickgrid
Advanced tools
slickgrid - npm Package Compare versions
Comparing version 5.4.2 to 5.5.0
@@ -31,3 +31,3 @@ "use strict"; | ||
| syncResizeTitle: "Synchronous resize", | ||
| headerColumnValueExtractor: (columnDef) => columnDef.name || "" | ||
| headerColumnValueExtractor: (columnDef) => columnDef.name instanceof HTMLElement ? columnDef.name.innerHTML : columnDef.name || "" | ||
| }); | ||
@@ -56,16 +56,18 @@ this._gridUid = grid.getUID(), this._options = Utils.extend({}, this._defaults, options), this.init(this.grid); | ||
| handleHeaderContextMenu(e) { | ||
| var _a, _b, _c, _d, _e, _f, _g; | ||
| var _a, _b, _c, _d, _e, _f; | ||
| e.preventDefault(), Utils.emptyElement(this._listElm), this.updateColumnOrder(), this._columnCheckboxes = []; | ||
| let columnId, columnLabel, excludeCssClass; | ||
| for (let i = 0; i < this.columns.length; i++) { | ||
| columnId = this.columns[i].id, excludeCssClass = this.columns[i].excludeFromColumnPicker ? "hidden" : ""; | ||
| columnId = this.columns[i].id; | ||
| let colName = this.columns[i].name instanceof HTMLElement ? this.columns[i].name.innerHTML : this.columns[i].name || ""; | ||
| excludeCssClass = this.columns[i].excludeFromColumnPicker ? "hidden" : ""; | ||
| let liElm = document.createElement("li"); | ||
| liElm.className = excludeCssClass, liElm.ariaLabel = ((_a = this.columns[i]) == null ? void 0 : _a.name) || ""; | ||
| liElm.className = excludeCssClass, liElm.ariaLabel = colName; | ||
| let checkboxElm = document.createElement("input"); | ||
| checkboxElm.type = "checkbox", checkboxElm.id = `${this._gridUid}colpicker-${columnId}`, checkboxElm.dataset.columnid = String(this.columns[i].id), liElm.appendChild(checkboxElm), this._columnCheckboxes.push(checkboxElm), Utils.isDefined(this.grid.getColumnIndex(columnId)) && !this.columns[i].hidden && (checkboxElm.checked = !0), (_c = (_b = this._options) == null ? void 0 : _b.columnPicker) != null && _c.headerColumnValueExtractor ? columnLabel = this._options.columnPicker.headerColumnValueExtractor(this.columns[i], this._options) : columnLabel = this._defaults.headerColumnValueExtractor(this.columns[i], this._options); | ||
| checkboxElm.type = "checkbox", checkboxElm.id = `${this._gridUid}colpicker-${columnId}`, checkboxElm.dataset.columnid = String(this.columns[i].id), liElm.appendChild(checkboxElm), this._columnCheckboxes.push(checkboxElm), Utils.isDefined(this.grid.getColumnIndex(columnId)) && !this.columns[i].hidden && (checkboxElm.checked = !0), columnLabel = (_b = (_a = this._options) == null ? void 0 : _a.columnPicker) != null && _b.headerColumnValueExtractor ? this._options.columnPicker.headerColumnValueExtractor(this.columns[i], this._options) : this._defaults.headerColumnValueExtractor(this.columns[i], this._options); | ||
| let labelElm = document.createElement("label"); | ||
| labelElm.htmlFor = `${this._gridUid}colpicker-${columnId}`, labelElm.innerHTML = columnLabel, liElm.appendChild(labelElm), this._listElm.appendChild(liElm); | ||
| labelElm.htmlFor = `${this._gridUid}colpicker-${columnId}`, labelElm.innerHTML = this.grid.sanitizeHtmlString(columnLabel), liElm.appendChild(labelElm), this._listElm.appendChild(liElm); | ||
| } | ||
| if (this._options.columnPicker && (!this._options.columnPicker.hideForceFitButton || !this._options.columnPicker.hideSyncResizeButton) && this._listElm.appendChild(document.createElement("hr")), !((_d = this._options.columnPicker) != null && _d.hideForceFitButton)) { | ||
| let forceFitTitle = ((_e = this._options.columnPicker) == null ? void 0 : _e.forceFitTitle) || this._options.forceFitTitle, liElm = document.createElement("li"); | ||
| if (this._options.columnPicker && (!this._options.columnPicker.hideForceFitButton || !this._options.columnPicker.hideSyncResizeButton) && this._listElm.appendChild(document.createElement("hr")), !((_c = this._options.columnPicker) != null && _c.hideForceFitButton)) { | ||
| let forceFitTitle = ((_d = this._options.columnPicker) == null ? void 0 : _d.forceFitTitle) || this._options.forceFitTitle, liElm = document.createElement("li"); | ||
| liElm.ariaLabel = forceFitTitle || "", this._listElm.appendChild(liElm); | ||
@@ -77,4 +79,4 @@ let forceFitCheckboxElm = document.createElement("input"); | ||
| } | ||
| if (!((_f = this._options.columnPicker) != null && _f.hideSyncResizeButton)) { | ||
| let syncResizeTitle = ((_g = this._options.columnPicker) == null ? void 0 : _g.syncResizeTitle) || this._options.syncResizeTitle, liElm = document.createElement("li"); | ||
| if (!((_e = this._options.columnPicker) != null && _e.hideSyncResizeButton)) { | ||
| let syncResizeTitle = ((_f = this._options.columnPicker) == null ? void 0 : _f.syncResizeTitle) || this._options.syncResizeTitle, liElm = document.createElement("li"); | ||
| liElm.ariaLabel = syncResizeTitle || "", this._listElm.appendChild(liElm); | ||
@@ -102,3 +104,3 @@ let syncResizeCheckboxElm = document.createElement("input"); | ||
| var _a; | ||
| (_a = this._columnTitleElm) != null && _a.innerHTML && (this._columnTitleElm.innerHTML = pickerOptions.columnTitle); | ||
| (_a = this._columnTitleElm) != null && _a.innerHTML && (this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(pickerOptions.columnTitle)); | ||
| } | ||
@@ -105,0 +107,0 @@ updateColumn(e) { |
@@ -31,3 +31,3 @@ "use strict"; | ||
| syncResizeTitle: "Synchronous resize", | ||
| headerColumnValueExtractor: (columnDef) => columnDef.name || "" | ||
| headerColumnValueExtractor: (columnDef) => columnDef.name instanceof HTMLElement ? columnDef.name.innerHTML : columnDef.name || "" | ||
| }); | ||
@@ -57,16 +57,18 @@ this._gridUid = grid.getUID(), this._gridOptions = Utils.extend({}, this._defaults, gridOptions), this.init(this.grid); | ||
| handleHeaderContextMenu(e) { | ||
| var _a, _b, _c, _d, _e, _f, _g; | ||
| var _a, _b, _c, _d, _e, _f; | ||
| e.preventDefault(), Utils.emptyElement(this._listElm), this.updateColumnOrder(), this._columnCheckboxes = []; | ||
| let columnId, columnLabel, excludeCssClass; | ||
| for (let i = 0; i < this.columns.length; i++) { | ||
| columnId = this.columns[i].id, excludeCssClass = this.columns[i].excludeFromColumnPicker ? "hidden" : ""; | ||
| columnId = this.columns[i].id; | ||
| let colName = this.columns[i].name instanceof HTMLElement ? this.columns[i].name.innerHTML : this.columns[i].name || ""; | ||
| excludeCssClass = this.columns[i].excludeFromColumnPicker ? "hidden" : ""; | ||
| let liElm = document.createElement("li"); | ||
| liElm.className = excludeCssClass, liElm.ariaLabel = ((_a = this.columns[i]) == null ? void 0 : _a.name) || ""; | ||
| liElm.className = excludeCssClass, liElm.ariaLabel = colName; | ||
| let checkboxElm = document.createElement("input"); | ||
| checkboxElm.type = "checkbox", checkboxElm.id = `${this._gridUid}colpicker-${columnId}`, checkboxElm.dataset.columnid = String(this.columns[i].id), liElm.appendChild(checkboxElm), this._columnCheckboxes.push(checkboxElm), Utils.isDefined(this.grid.getColumnIndex(columnId)) && !this.columns[i].hidden && (checkboxElm.checked = !0), (_c = (_b = this._gridOptions) == null ? void 0 : _b.columnPicker) != null && _c.headerColumnValueExtractor ? columnLabel = this._gridOptions.columnPicker.headerColumnValueExtractor(this.columns[i], this._gridOptions) : columnLabel = this._defaults.headerColumnValueExtractor(this.columns[i], this._gridOptions); | ||
| checkboxElm.type = "checkbox", checkboxElm.id = `${this._gridUid}colpicker-${columnId}`, checkboxElm.dataset.columnid = String(this.columns[i].id), liElm.appendChild(checkboxElm), this._columnCheckboxes.push(checkboxElm), Utils.isDefined(this.grid.getColumnIndex(columnId)) && !this.columns[i].hidden && (checkboxElm.checked = !0), columnLabel = (_b = (_a = this._gridOptions) == null ? void 0 : _a.columnPicker) != null && _b.headerColumnValueExtractor ? this._gridOptions.columnPicker.headerColumnValueExtractor(this.columns[i], this._gridOptions) : this._defaults.headerColumnValueExtractor(this.columns[i], this._gridOptions); | ||
| let labelElm = document.createElement("label"); | ||
| labelElm.htmlFor = `${this._gridUid}colpicker-${columnId}`, labelElm.innerHTML = columnLabel, liElm.appendChild(labelElm), this._listElm.appendChild(liElm); | ||
| labelElm.htmlFor = `${this._gridUid}colpicker-${columnId}`, labelElm.innerHTML = this.grid.sanitizeHtmlString(columnLabel), liElm.appendChild(labelElm), this._listElm.appendChild(liElm); | ||
| } | ||
| if (this._gridOptions.columnPicker && (!this._gridOptions.columnPicker.hideForceFitButton || !this._gridOptions.columnPicker.hideSyncResizeButton) && this._listElm.appendChild(document.createElement("hr")), !((_d = this._gridOptions.columnPicker) != null && _d.hideForceFitButton)) { | ||
| let forceFitTitle = ((_e = this._gridOptions.columnPicker) == null ? void 0 : _e.forceFitTitle) || this._gridOptions.forceFitTitle, liElm = document.createElement("li"); | ||
| if (this._gridOptions.columnPicker && (!this._gridOptions.columnPicker.hideForceFitButton || !this._gridOptions.columnPicker.hideSyncResizeButton) && this._listElm.appendChild(document.createElement("hr")), !((_c = this._gridOptions.columnPicker) != null && _c.hideForceFitButton)) { | ||
| let forceFitTitle = ((_d = this._gridOptions.columnPicker) == null ? void 0 : _d.forceFitTitle) || this._gridOptions.forceFitTitle, liElm = document.createElement("li"); | ||
| liElm.ariaLabel = forceFitTitle || "", this._listElm.appendChild(liElm); | ||
@@ -78,4 +80,4 @@ let forceFitCheckboxElm = document.createElement("input"); | ||
| } | ||
| if (!((_f = this._gridOptions.columnPicker) != null && _f.hideSyncResizeButton)) { | ||
| let syncResizeTitle = ((_g = this._gridOptions.columnPicker) == null ? void 0 : _g.syncResizeTitle) || this._gridOptions.syncResizeTitle, liElm = document.createElement("li"); | ||
| if (!((_e = this._gridOptions.columnPicker) != null && _e.hideSyncResizeButton)) { | ||
| let syncResizeTitle = ((_f = this._gridOptions.columnPicker) == null ? void 0 : _f.syncResizeTitle) || this._gridOptions.syncResizeTitle, liElm = document.createElement("li"); | ||
| liElm.ariaLabel = syncResizeTitle || "", this._listElm.appendChild(liElm); | ||
@@ -103,3 +105,3 @@ let syncResizeCheckboxElm = document.createElement("input"); | ||
| var _a; | ||
| (_a = this._columnTitleElm) != null && _a.innerHTML && (this._columnTitleElm.innerHTML = pickerOptions.columnTitle); | ||
| (_a = this._columnTitleElm) != null && _a.innerHTML && (this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(pickerOptions.columnTitle)); | ||
| } | ||
@@ -106,0 +108,0 @@ updateColumn(e) { |
@@ -47,3 +47,3 @@ "use strict"; | ||
| useClickToRepositionMenu: !0, | ||
| headerColumnValueExtractor: (columnDef) => columnDef.name | ||
| headerColumnValueExtractor: (columnDef) => columnDef.name instanceof HTMLElement ? columnDef.name.innerHTML : columnDef.name || "" | ||
| }); | ||
@@ -125,3 +125,3 @@ this._gridUid = grid.getUID(), this._gridOptions = gridOptions, this._gridMenuOptions = Utils.extend({}, this._defaults, gridOptions.gridMenu), this._bindingEventService = new BindingEventService(), grid.onSetOptions.subscribe((_e, args) => { | ||
| let level = (args == null ? void 0 : args.level) || 0, isSubMenu = level > 0; | ||
| !isSubMenu && ((_a = this._gridMenuOptions) != null && _a.commandTitle || (_b = this._gridMenuOptions) != null && _b.customTitle) && (this._commandTitleElm = document.createElement("div"), this._commandTitleElm.className = "title", this._commandTitleElm.innerHTML = this._gridMenuOptions.commandTitle || this._gridMenuOptions.customTitle, commandListElm.appendChild(this._commandTitleElm)); | ||
| !isSubMenu && ((_a = this._gridMenuOptions) != null && _a.commandTitle || (_b = this._gridMenuOptions) != null && _b.customTitle) && (this._commandTitleElm = document.createElement("div"), this._commandTitleElm.className = "title", this._commandTitleElm.innerHTML = this.grid.sanitizeHtmlString(this._gridMenuOptions.commandTitle || this._gridMenuOptions.customTitle), commandListElm.appendChild(this._commandTitleElm)); | ||
| for (let i = 0, ln = commandItems.length; i < ln; i++) { | ||
@@ -142,3 +142,3 @@ let addClickListener = !0, item = commandItems[i], callbackArgs = { | ||
| let textElm = document.createElement("span"); | ||
| if (textElm.className = "slick-gridmenu-content", textElm.innerHTML = item.title || "", liElm.appendChild(textElm), item.textCssClass && textElm.classList.add(...item.textCssClass.split(" ")), commandListElm.appendChild(liElm), addClickListener) { | ||
| if (textElm.className = "slick-gridmenu-content", textElm.innerHTML = this.grid.sanitizeHtmlString(item.title || ""), liElm.appendChild(textElm), item.textCssClass && textElm.classList.add(...item.textCssClass.split(" ")), commandListElm.appendChild(liElm), addClickListener) { | ||
| let eventGroup = isSubMenu ? "sub-menu" : "parent-menu"; | ||
@@ -159,3 +159,3 @@ this._bindingEventService.bind(liElm, "click", this.handleMenuItemClick.bind(this, item, level), void 0, eventGroup); | ||
| var _a; | ||
| this.grid.onColumnsReordered.subscribe(this.updateColumnOrder.bind(this)), (_a = this._gridMenuOptions) != null && _a.columnTitle && (this._columnTitleElm = document.createElement("div"), this._columnTitleElm.className = "title", this._columnTitleElm.innerHTML = this._gridMenuOptions.columnTitle, this._menuElm.appendChild(this._columnTitleElm)), this._bindingEventService.bind(this._menuElm, "click", this.updateColumn.bind(this)), this._listElm = document.createElement("span"), this._listElm.className = "slick-gridmenu-list", this._listElm.role = "menu"; | ||
| this.grid.onColumnsReordered.subscribe(this.updateColumnOrder.bind(this)), (_a = this._gridMenuOptions) != null && _a.columnTitle && (this._columnTitleElm = document.createElement("div"), this._columnTitleElm.className = "title", this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(this._gridMenuOptions.columnTitle), this._menuElm.appendChild(this._columnTitleElm)), this._bindingEventService.bind(this._menuElm, "click", this.updateColumn.bind(this)), this._listElm = document.createElement("span"), this._listElm.className = "slick-gridmenu-list", this._listElm.role = "menu"; | ||
| } | ||
@@ -167,3 +167,3 @@ /** Delete and then Recreate the Grid Menu (for example when we switch from regular to a frozen grid) */ | ||
| showGridMenu(e) { | ||
| var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l; | ||
| var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k; | ||
| let targetEvent = e.touches ? e.touches[0] : e; | ||
@@ -184,11 +184,11 @@ e.preventDefault(), Utils.emptyElement(this._listElm), Utils.emptyElement(this._commandListElm); | ||
| columnId = this.columns[i].id, excludeCssClass = this.columns[i].excludeFromGridMenu ? "hidden" : ""; | ||
| let liElm = document.createElement("li"); | ||
| liElm.className = excludeCssClass, liElm.ariaLabel = ((_e = this.columns[i]) == null ? void 0 : _e.name) || ""; | ||
| let colName = this.columns[i].name instanceof HTMLElement ? this.columns[i].name.innerHTML : this.columns[i].name || "", liElm = document.createElement("li"); | ||
| liElm.className = excludeCssClass, liElm.ariaLabel = colName; | ||
| let checkboxElm = document.createElement("input"); | ||
| checkboxElm.type = "checkbox", checkboxElm.id = `${this._gridUid}-gridmenu-colpicker-${columnId}`, checkboxElm.dataset.columnid = String(this.columns[i].id), liElm.appendChild(checkboxElm), Utils.isDefined(this.grid.getColumnIndex(this.columns[i].id)) && !this.columns[i].hidden && (checkboxElm.checked = !0), this._columnCheckboxes.push(checkboxElm), (_f = this._gridMenuOptions) != null && _f.headerColumnValueExtractor ? columnLabel = this._gridMenuOptions.headerColumnValueExtractor(this.columns[i], this._gridOptions) : columnLabel = this._defaults.headerColumnValueExtractor(this.columns[i]); | ||
| checkboxElm.type = "checkbox", checkboxElm.id = `${this._gridUid}-gridmenu-colpicker-${columnId}`, checkboxElm.dataset.columnid = String(this.columns[i].id), liElm.appendChild(checkboxElm), Utils.isDefined(this.grid.getColumnIndex(this.columns[i].id)) && !this.columns[i].hidden && (checkboxElm.checked = !0), this._columnCheckboxes.push(checkboxElm), columnLabel = (_e = this._gridMenuOptions) != null && _e.headerColumnValueExtractor ? this._gridMenuOptions.headerColumnValueExtractor(this.columns[i], this._gridOptions) : this._defaults.headerColumnValueExtractor(this.columns[i]); | ||
| let labelElm = document.createElement("label"); | ||
| labelElm.htmlFor = `${this._gridUid}-gridmenu-colpicker-${columnId}`, labelElm.innerHTML = columnLabel || "", liElm.appendChild(labelElm), this._listElm.appendChild(liElm); | ||
| labelElm.htmlFor = `${this._gridUid}-gridmenu-colpicker-${columnId}`, labelElm.innerHTML = this.grid.sanitizeHtmlString(columnLabel || ""), liElm.appendChild(labelElm), this._listElm.appendChild(liElm); | ||
| } | ||
| if (this._gridMenuOptions && (!this._gridMenuOptions.hideForceFitButton || !this._gridMenuOptions.hideSyncResizeButton) && this._listElm.appendChild(document.createElement("hr")), !((_g = this._gridMenuOptions) != null && _g.hideForceFitButton)) { | ||
| let forceFitTitle = ((_h = this._gridMenuOptions) == null ? void 0 : _h.forceFitTitle) || this._defaults.forceFitTitle, liElm = document.createElement("li"); | ||
| if (this._gridMenuOptions && (!this._gridMenuOptions.hideForceFitButton || !this._gridMenuOptions.hideSyncResizeButton) && this._listElm.appendChild(document.createElement("hr")), !((_f = this._gridMenuOptions) != null && _f.hideForceFitButton)) { | ||
| let forceFitTitle = ((_g = this._gridMenuOptions) == null ? void 0 : _g.forceFitTitle) || this._defaults.forceFitTitle, liElm = document.createElement("li"); | ||
| liElm.ariaLabel = forceFitTitle, liElm.role = "menuitem", this._listElm.appendChild(liElm); | ||
@@ -200,4 +200,4 @@ let forceFitCheckboxElm = document.createElement("input"); | ||
| } | ||
| if (!((_i = this._gridMenuOptions) != null && _i.hideSyncResizeButton)) { | ||
| let syncResizeTitle = ((_j = this._gridMenuOptions) == null ? void 0 : _j.syncResizeTitle) || this._defaults.syncResizeTitle, liElm = document.createElement("li"); | ||
| if (!((_h = this._gridMenuOptions) != null && _h.hideSyncResizeButton)) { | ||
| let syncResizeTitle = ((_i = this._gridMenuOptions) == null ? void 0 : _i.syncResizeTitle) || this._defaults.syncResizeTitle, liElm = document.createElement("li"); | ||
| liElm.ariaLabel = syncResizeTitle, this._listElm.appendChild(liElm); | ||
@@ -211,4 +211,4 @@ let syncResizeCheckboxElm = document.createElement("input"); | ||
| buttonElm || (buttonElm = e.target.parentElement), this._menuElm.style.display = "block", this._menuElm.style.opacity = "0", this.repositionMenu(e, this._menuElm, buttonElm); | ||
| let menuMarginBottom = ((_k = this._gridMenuOptions) == null ? void 0 : _k.marginBottom) !== void 0 ? this._gridMenuOptions.marginBottom : this._defaults.marginBottom; | ||
| ((_l = this._gridMenuOptions) == null ? void 0 : _l.height) !== void 0 ? this._menuElm.style.height = `${this._gridMenuOptions.height}px` : this._menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY - menuMarginBottom}px`, this._menuElm.style.display = "block", this._menuElm.style.opacity = "1", this._menuElm.appendChild(this._listElm), this._isMenuOpen = !0, typeof e.stopPropagation == "function" && this.onAfterMenuShow.notify(callbackArgs, e, this).getReturnValue(); | ||
| let menuMarginBottom = ((_j = this._gridMenuOptions) == null ? void 0 : _j.marginBottom) !== void 0 ? this._gridMenuOptions.marginBottom : this._defaults.marginBottom; | ||
| ((_k = this._gridMenuOptions) == null ? void 0 : _k.height) !== void 0 ? this._menuElm.style.height = `${this._gridMenuOptions.height}px` : this._menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY - menuMarginBottom}px`, this._menuElm.style.display = "block", this._menuElm.style.opacity = "1", this._menuElm.appendChild(this._listElm), this._isMenuOpen = !0, typeof e.stopPropagation == "function" && this.onAfterMenuShow.notify(callbackArgs, e, this).getReturnValue(); | ||
| } | ||
@@ -260,3 +260,3 @@ getGridUidSelector() { | ||
| var _a, _b; | ||
| (_a = this._commandTitleElm) != null && _a.innerHTML && (this._commandTitleElm.innerHTML = gridMenuOptions.commandTitle || gridMenuOptions.customTitle || ""), (_b = this._columnTitleElm) != null && _b.innerHTML && (this._columnTitleElm.innerHTML = gridMenuOptions.columnTitle || ""); | ||
| (_a = this._commandTitleElm) != null && _a.innerHTML && (this._commandTitleElm.innerHTML = this.grid.sanitizeHtmlString(gridMenuOptions.commandTitle || gridMenuOptions.customTitle || "")), (_b = this._columnTitleElm) != null && _b.innerHTML && (this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(gridMenuOptions.columnTitle || "")); | ||
| } | ||
@@ -263,0 +263,0 @@ addSubMenuTitleWhenExists(item, commandOrOptionMenu) { |
@@ -66,3 +66,7 @@ "use strict"; | ||
| let column = args.column, node, targetElm = event.target; | ||
| targetElm && (node = targetElm.closest(".slick-header-column"), node && !(column != null && column.toolTip) && (node.title = targetElm.clientWidth < node.clientWidth && (_a = column == null ? void 0 : column.name) != null ? _a : "")), node = null; | ||
| if (targetElm && (node = targetElm.closest(".slick-header-column"), node && !(column != null && column.toolTip))) { | ||
| let titleVal = targetElm.clientWidth < node.clientWidth && (_a = column == null ? void 0 : column.name) != null ? _a : ""; | ||
| node.title = titleVal instanceof HTMLElement ? titleVal.innerHTML : titleVal; | ||
| } | ||
| node = null; | ||
| } | ||
@@ -69,0 +73,0 @@ }; |
@@ -219,7 +219,7 @@ "use strict"; | ||
| for (let j = range.fromCell; j < range.toCell + 1; j++) | ||
| columns[j].name.length > 0 && !columns[j].hidden && clipTextHeaders.push(this.getHeaderValueForColumn(columns[j])); | ||
| (columns[j].name instanceof HTMLElement ? columns[j].name.innerHTML : columns[j].name).length > 0 && !columns[j].hidden && clipTextHeaders.push(this.getHeaderValueForColumn(columns[j])); | ||
| clipTextRows.push(clipTextHeaders.join(" ")); | ||
| } | ||
| for (let j = range.fromCell; j < range.toCell + 1; j++) | ||
| columns[j].name.length > 0 && !columns[j].hidden && clipTextCells.push(this.getDataItemValueForColumn(dt, columns[j], e)); | ||
| (columns[j].name instanceof HTMLElement ? columns[j].name.innerHTML : columns[j].name).length > 0 && !columns[j].hidden && clipTextCells.push(this.getDataItemValueForColumn(dt, columns[j], e)); | ||
| clipTextRows.push(clipTextCells.join(" ")); | ||
@@ -226,0 +226,0 @@ } |
@@ -8,3 +8,3 @@ "use strict"; | ||
| // src/plugins/slick.customtooltip.ts | ||
| var SlickEventHandler = Slick.EventHandler, Utils = Slick.Utils, CustomTooltip = class { | ||
| var SlickEventHandler = Slick.EventHandler, Utils = Slick.Utils, SlickCustomTooltip = class { | ||
| constructor(tooltipOptions) { | ||
@@ -185,4 +185,4 @@ this.tooltipOptions = tooltipOptions; | ||
| if (typeof formatterOrText == "function") { | ||
| let tooltipText = formatterOrText(cell.row, cell.cell, value, columnDef, item, this._grid), formatterText = typeof tooltipText == "object" && (tooltipText != null && tooltipText.text) ? tooltipText.text : typeof tooltipText == "string" ? tooltipText : ""; | ||
| return this._grid.sanitizeHtmlString(formatterText); | ||
| let tooltipResult = formatterOrText(cell.row, cell.cell, value, columnDef, item, this._grid), formatterText = Object.prototype.toString.call(tooltipResult) !== "[object Object]" ? tooltipResult : tooltipResult.html || tooltipResult.text; | ||
| return formatterText instanceof HTMLElement && (formatterText = formatterText.outerHTML), this._grid.sanitizeHtmlString(formatterText); | ||
| } else if (typeof formatterOrText == "string") | ||
@@ -216,3 +216,3 @@ return this._grid.sanitizeHtmlString(formatterOrText); | ||
| Plugins: { | ||
| CustomTooltip | ||
| CustomTooltip: SlickCustomTooltip | ||
| } | ||
@@ -219,0 +219,0 @@ } |
@@ -116,3 +116,10 @@ "use strict"; | ||
| moveIconFormatter(row, _cell, _val, _column, dataContext, grid) { | ||
| return this.checkUsabilityOverride(row, dataContext, grid) ? { addClasses: `cell-reorder dnd ${this._options.cssClass || ""}`.trim(), text: "" } : ""; | ||
| if (this.checkUsabilityOverride(row, dataContext, grid)) { | ||
| let iconElm = document.createElement("div"); | ||
| return iconElm.className = this._options.cssClass || "", { | ||
| addClasses: `cell-reorder dnd ${this._options.containerCssClass || ""}`, | ||
| html: iconElm | ||
| }; | ||
| } else | ||
| return ""; | ||
| } | ||
@@ -119,0 +126,0 @@ checkUsabilityOverride(row, dataContext, grid) { |
@@ -12,3 +12,4 @@ "use strict"; | ||
| groupItemMetadataProvider: null, | ||
| inlineFilters: !1 | ||
| inlineFilters: !1, | ||
| useCSPSafeFilter: !1 | ||
| }); | ||
@@ -28,2 +29,4 @@ // private | ||
| // filter function | ||
| __publicField(this, "filterCSPSafe", null); | ||
| // filter function | ||
| __publicField(this, "updated", null); | ||
@@ -46,3 +49,5 @@ // updated item ids | ||
| __publicField(this, "compiledFilter"); | ||
| __publicField(this, "compiledFilterCSPSafe"); | ||
| __publicField(this, "compiledFilterWithCaching"); | ||
| __publicField(this, "compiledFilterWithCachingCSPSafe"); | ||
| __publicField(this, "filterCache", []); | ||
@@ -102,3 +107,3 @@ __publicField(this, "_grid"); | ||
| destroy() { | ||
| this.items = [], this.idxById = null, this.rowsById = null, this.filter = null, this.updated = null, this.sortComparer = null, this.filterCache = [], this.filteredItems = [], this.compiledFilter = null, this.compiledFilterWithCaching = null, this._grid && this._grid.onSelectedRowsChanged && this._grid.onCellCssStylesChanged && (this._grid.onSelectedRowsChanged.unsubscribe(), this._grid.onCellCssStylesChanged.unsubscribe()), this.onRowsOrCountChanged && this.onRowsOrCountChanged.unsubscribe(); | ||
| this.items = [], this.idxById = null, this.rowsById = null, this.filter = null, this.filterCSPSafe = null, this.updated = null, this.sortComparer = null, this.filterCache = [], this.filteredItems = [], this.compiledFilter = null, this.compiledFilterCSPSafe = null, this.compiledFilterWithCaching = null, this.compiledFilterWithCachingCSPSafe = null, this._grid && this._grid.onSelectedRowsChanged && this._grid.onCellCssStylesChanged && (this._grid.onSelectedRowsChanged.unsubscribe(), this._grid.onCellCssStylesChanged.unsubscribe()), this.onRowsOrCountChanged && this.onRowsOrCountChanged.unsubscribe(); | ||
| } | ||
@@ -200,3 +205,3 @@ setRefreshHints(hints) { | ||
| getFilter() { | ||
| return this.filter; | ||
| return this._options.useCSPSafeFilter ? this.filterCSPSafe : this.filter; | ||
| } | ||
@@ -208,3 +213,3 @@ /** | ||
| setFilter(filterFn) { | ||
| this.filter = filterFn, this._options.inlineFilters && (this.compiledFilter = this.compileFilter(), this.compiledFilterWithCaching = this.compileFilterWithCaching()), this.refresh(); | ||
| this.filterCSPSafe = filterFn, this.filter = filterFn, this._options.inlineFilters && (this.compiledFilterCSPSafe = this.compileFilterCSPSafe, this.compiledFilterWithCachingCSPSafe = this.compileFilterWithCachingCSPSafe, this.compiledFilter = this.compileFilter(this._options.useCSPSafeFilter), this.compiledFilterWithCaching = this.compileFilterWithCaching(this._options.useCSPSafeFilter)), this.refresh(); | ||
| } | ||
@@ -564,3 +569,13 @@ /** Get current Grouping info */ | ||
| } | ||
| compileFilter() { | ||
| compileFilterCSPSafe(_items, _args) { | ||
| if (typeof this.filterCSPSafe != "function") | ||
| return []; | ||
| let _retval = [], _il = _items.length; | ||
| for (let _i = 0; _i < _il; _i++) | ||
| this.filterCSPSafe(_items[_i], _args) && _retval.push(_items[_i]); | ||
| return _retval; | ||
| } | ||
| compileFilter(stopRunningIfCSPSafeIsActive = !1) { | ||
| if (stopRunningIfCSPSafeIsActive) | ||
| return null; | ||
| let filterInfo = this.getFunctionInfo(this.filter), filterPath1 = "{ continue _coreloop; }$1", filterPath2 = "{ _retval[_idx++] = $item$; continue _coreloop; }$1", filterBody = filterInfo.body.replace(/return false\s*([;}]|\}|$)/gi, filterPath1).replace(/return!1([;}]|\}|$)/gi, filterPath1).replace(/return true\s*([;}]|\}|$)/gi, filterPath2).replace(/return!0([;}]|\}|$)/gi, filterPath2).replace( | ||
@@ -585,3 +600,5 @@ /return ([^;}]+?)\s*([;}]|$)/gi, | ||
| } | ||
| compileFilterWithCaching() { | ||
| compileFilterWithCaching(stopRunningIfCSPSafeIsActive = !1) { | ||
| if (stopRunningIfCSPSafeIsActive) | ||
| return null; | ||
| let filterInfo = this.getFunctionInfo(this.filter), filterPath1 = "{ continue _coreloop; }$1", filterPath2 = "{ _cache[_i] = true;_retval[_idx++] = $item$; continue _coreloop; }$1", filterBody = filterInfo.body.replace(/return false\s*([;}]|\}|$)/gi, filterPath1).replace(/return!1([;}]|\}|$)/gi, filterPath1).replace(/return true\s*([;}]|\}|$)/gi, filterPath2).replace(/return!0([;}]|\}|$)/gi, filterPath2).replace( | ||
@@ -610,2 +627,10 @@ /return ([^;}]+?)\s*([;}]|$)/gi, | ||
| } | ||
| compileFilterWithCachingCSPSafe(_items, _args, filterCache) { | ||
| if (typeof this.filterCSPSafe != "function") | ||
| return []; | ||
| let _retval = [], _il = _items.length; | ||
| for (let _i = 0; _i < _il; _i++) | ||
| (filterCache[_i] || this.filterCSPSafe(_items[_i], _args)) && _retval.push(_items[_i]); | ||
| return _retval; | ||
| } | ||
| /** | ||
@@ -643,5 +668,5 @@ * In ES5 we could set the function name on the fly but in ES6 this is forbidden and we need to set it through differently | ||
| getFilteredAndPagedItems(items) { | ||
| if (this.filter) { | ||
| let batchFilter = this._options.inlineFilters ? this.compiledFilter : this.uncompiledFilter, batchFilterWithCaching = this._options.inlineFilters ? this.compiledFilterWithCaching : this.uncompiledFilterWithCaching; | ||
| this.refreshHints.isFilterNarrowing ? this.filteredItems = batchFilter.call(this, this.filteredItems, this.filterArgs) : this.refreshHints.isFilterExpanding ? this.filteredItems = batchFilterWithCaching.call(this, items, this.filterArgs, this.filterCache) : this.refreshHints.isFilterUnchanged || (this.filteredItems = batchFilter.call(this, items, this.filterArgs)); | ||
| if (this._options.useCSPSafeFilter ? this.filterCSPSafe : this.filter) { | ||
| let batchFilter, batchFilterWithCaching; | ||
| this._options.useCSPSafeFilter ? (batchFilter = this._options.inlineFilters ? this.compiledFilterCSPSafe : this.uncompiledFilter, batchFilterWithCaching = this._options.inlineFilters ? this.compiledFilterWithCachingCSPSafe : this.uncompiledFilterWithCaching) : (batchFilter = this._options.inlineFilters ? this.compiledFilter : this.uncompiledFilter, batchFilterWithCaching = this._options.inlineFilters ? this.compiledFilterWithCaching : this.uncompiledFilterWithCaching), this.refreshHints.isFilterNarrowing ? this.filteredItems = batchFilter.call(this, this.filteredItems, this.filterArgs) : this.refreshHints.isFilterExpanding ? this.filteredItems = batchFilterWithCaching.call(this, items, this.filterArgs, this.filterCache) : this.refreshHints.isFilterUnchanged || (this.filteredItems = batchFilter.call(this, items, this.filterArgs)); | ||
| } else | ||
@@ -648,0 +673,0 @@ this.filteredItems = this.pagesize ? items : items.concat(); |
@@ -1,2 +0,2 @@ | ||
| import type { AutoSize, CellMenuOption, CustomTooltipOption, Editor, EditorValidator, Formatter, FormatterResultObject, GroupTotalsFormatter, Grouping, HeaderButtonsOrMenu } from './index'; | ||
| import type { AutoSize, CellMenuOption, CustomTooltipOption, Editor, EditorValidator, Formatter, FormatterResultWithHtml, FormatterResultWithText, GroupTotalsFormatter, Grouping, HeaderButtonsOrMenu } from './index'; | ||
| import type { SlickGrid } from '../slick.grid'; | ||
@@ -7,3 +7,3 @@ type PathsToStringProps<T> = T extends string | number | boolean | Date ? [] : { | ||
| type Join<T extends any[], D extends string> = T extends [] ? never : T extends [infer F] ? F : T extends [infer F, ...infer R] ? F extends string ? string extends F ? string : `${F}${D}${Join<R, D>}` : never : string; | ||
| export type FormatterOverrideCallback = (row: number, cell: number, val: any, columnDef: Column, item: any, grid: SlickGrid) => string | FormatterResultObject; | ||
| export type FormatterOverrideCallback = (row: number, cell: number, val: any, columnDef: Column, item: any, grid: SlickGrid) => string | FormatterResultWithHtml | FormatterResultWithText; | ||
| export interface Column<TData = any> { | ||
@@ -94,3 +94,3 @@ /** Defaults to false, should we always render the column? */ | ||
| /** Column Title Name to be displayed in the Grid (UI) */ | ||
| name?: string; | ||
| name?: string | HTMLElement; | ||
| /** column offset width */ | ||
@@ -97,0 +97,0 @@ offsetWidth?: number; |
@@ -1,2 +0,2 @@ | ||
| import type { CellRange, Column, FormatterResultObject } from './index'; | ||
| import type { CellRange, Column, FormatterResultWithHtml, FormatterResultWithText } from './index'; | ||
| import type { SlickEventData } from '../slick.core'; | ||
@@ -13,5 +13,5 @@ export interface ExcelCopyBufferOption<T = any> { | ||
| /** option to specify a custom column value extractor function */ | ||
| dataItemColumnValueExtractor?: (item: any, columnDef: Column<T>) => string | FormatterResultObject | null; | ||
| dataItemColumnValueExtractor?: (item: any, columnDef: Column<T>) => string | FormatterResultWithHtml | FormatterResultWithText | null; | ||
| /** option to specify a custom column value setter function */ | ||
| dataItemColumnValueSetter?: (item: any, columnDef: Column<T>, value: any) => string | FormatterResultObject | null; | ||
| dataItemColumnValueSetter?: (item: any, columnDef: Column<T>, value: any) => string | FormatterResultWithHtml | FormatterResultWithText | null; | ||
| /** option to specify a custom handler for paste actions */ | ||
@@ -18,0 +18,0 @@ clipboardCommandHandler?: (editCommand: any) => void; |
@@ -1,4 +0,4 @@ | ||
| import type { Column, FormatterResultObject } from './index'; | ||
| import type { Column, FormatterResultWithHtml, FormatterResultWithText } from './index'; | ||
| import type { SlickGrid } from '../slick.grid'; | ||
| export declare type Formatter<T = any> = (row: number, cell: number, value: any, columnDef: Column<T>, dataContext: T, grid: SlickGrid) => string | FormatterResultObject; | ||
| export declare type Formatter<T = any> = (row: number, cell: number, value: any, columnDef: Column<T>, dataContext: T, grid: SlickGrid) => string | HTMLElement | FormatterResultWithHtml | FormatterResultWithText; | ||
| //# sourceMappingURL=formatter.interface.d.ts.map |
@@ -6,7 +6,13 @@ export interface FormatterResultObject { | ||
| removeClasses?: string; | ||
| /** Text to be displayed in the cell, basically the formatter output. */ | ||
| text: string; | ||
| /** Optional tooltip text when hovering the cell div container. */ | ||
| toolTip?: string; | ||
| } | ||
| export interface FormatterResultWithText extends FormatterResultObject { | ||
| /** Text to be displayed in the cell, basically the formatter output. */ | ||
| text: string; | ||
| } | ||
| export interface FormatterResultWithHtml extends FormatterResultObject { | ||
| /** Text to be displayed in the cell, basically the formatter output. */ | ||
| html: HTMLElement; | ||
| } | ||
| //# sourceMappingURL=formatterResultObject.interface.d.ts.map |
@@ -36,2 +36,6 @@ import type { Column as BaseColumn, CellMenuOption, ColumnPickerOption, ColumnReorderFunction, ContextMenuOption, CustomTooltipOption, EditCommand, Editor, ExcelCopyBufferOption, Formatter, GridMenuOption, ItemMetadata } from './index'; | ||
| /** | ||
| * Added for CSP header because of dynamic css generation. | ||
| */ | ||
| nonce?: string; | ||
| /** | ||
| * Defaults to false, when enabled will try to commit the current edit without focusing on the next row. | ||
@@ -114,2 +118,8 @@ * If a custom editor is implemented and the grid cannot auto commit, you must use this option to implement it yourself | ||
| /** | ||
| * Defaults to true, do we want to allow passing HTML string to cell/row rendering by using `innerHTML`. | ||
| * When this is enabled and input is a string, it will use `innerHTML = 'some html'` to render the input, however when disable it will use `textContent = 'some html'`. | ||
| * Note: for strict CSP, you would want to disable this option and convert all your custom Formatters to return an HTMLElement instead of a string | ||
| */ | ||
| enableHtmlRendering?: boolean; | ||
| /** | ||
| * Do we want to always enable the mousewheel scroll handler? | ||
@@ -116,0 +126,0 @@ * In other words, do we want the mouse scrolling would work from anywhere. |
@@ -19,2 +19,4 @@ import type { SlickCellRangeSelector } from '../plugins/slick.cellrangeselector'; | ||
| cssClass?: string; | ||
| /** A CSS class to be added to the cell container. */ | ||
| containerCssClass?: string; | ||
| /** Column definition id(defaults to "_move") */ | ||
@@ -21,0 +23,0 @@ columnId?: string; |
| import { SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickEventHandler as SlickEventHandler_ } from '../slick.core'; | ||
| import type { Column, DOMEvent, DragRowMove, FormatterResultObject, CrossGridRowMoveManagerOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { Column, DOMEvent, DragRowMove, CrossGridRowMoveManagerOption, FormatterResultWithText, UsabilityOverrideFn } from '../models/index'; | ||
| import type { SlickGrid } from '../slick.grid'; | ||
@@ -55,3 +55,3 @@ /** | ||
| getColumnDefinition(): Column; | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultObject | string; | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultWithText | string; | ||
| protected checkUsabilityOverride(row: number, dataContext: any, grid: SlickGrid): boolean; | ||
@@ -58,0 +58,0 @@ /** |
@@ -74,3 +74,3 @@ import type { CancellablePromiseWrapper, Column, CustomTooltipOption, DOMEvent, Formatter, GridOption } from '../models/index'; | ||
| */ | ||
| export declare class CustomTooltip { | ||
| export declare class SlickCustomTooltip { | ||
| protected readonly tooltipOptions: Partial<CustomTooltipOption>; | ||
@@ -77,0 +77,0 @@ pluginName: "CustomTooltip"; |
| import { SlickEvent as SlickEvent_, SlickEventHandler as SlickEventHandler_ } from '../slick.core'; | ||
| import type { Column, DOMEvent, FormatterResultObject, GridOption, OnAfterRowDetailToggleArgs, OnBeforeRowDetailToggleArgs, OnRowBackToViewportRangeArgs, OnRowDetailAsyncEndUpdateArgs, OnRowDetailAsyncResponseArgs, OnRowOutOfViewportRangeArgs, RowDetailViewOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { Column, DOMEvent, FormatterResultWithHtml, FormatterResultWithText, GridOption, OnAfterRowDetailToggleArgs, OnBeforeRowDetailToggleArgs, OnRowBackToViewportRangeArgs, OnRowDetailAsyncEndUpdateArgs, OnRowDetailAsyncResponseArgs, OnRowOutOfViewportRangeArgs, RowDetailViewOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { SlickDataView } from '../slick.dataview'; | ||
@@ -187,3 +187,3 @@ import type { SlickGrid } from '../slick.grid'; | ||
| cssClass: string | undefined; | ||
| formatter: (row: number, _cell: number, _val: any, _column: Column<any>, dataContext: any, grid: SlickGrid<any, Column<any>, GridOption<Column<any>>>) => string | FormatterResultObject; | ||
| formatter: (row: number, _cell: number, _val: any, _column: Column<any>, dataContext: any, grid: SlickGrid<any, Column<any>, GridOption<Column<any>>>) => string | FormatterResultWithHtml | FormatterResultWithText; | ||
| }; | ||
@@ -193,3 +193,3 @@ /** Return the currently expanded rows */ | ||
| /** The cell Formatter that shows the icon that will be used to toggle the Row Detail */ | ||
| protected detailSelectionFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultObject | string; | ||
| protected detailSelectionFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultWithHtml | FormatterResultWithText | string; | ||
| /** Resize the Row Detail View */ | ||
@@ -196,0 +196,0 @@ resizeDetailView(item: any): void; |
| import { SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickEventHandler as SlickEventHandler_ } from '../slick.core'; | ||
| import type { Column, DOMEvent, DragRowMove, FormatterResultObject, RowMoveManagerOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { Column, DOMEvent, DragRowMove, FormatterResultWithHtml, RowMoveManagerOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { SlickGrid } from '../slick.grid'; | ||
| /** | ||
| * Row Move Manager options: | ||
| * containerCssClass: A CSS class to be added to the cell container. | ||
| * cssClass: A CSS class to be added to the div of the cell formatter. | ||
@@ -48,3 +49,3 @@ * columnId: Column definition id (defaults to "_move") | ||
| getColumnDefinition(): Column; | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultObject | string; | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultWithHtml | string; | ||
| protected checkUsabilityOverride(row: number, dataContext: any, grid: SlickGrid): boolean; | ||
@@ -51,0 +52,0 @@ /** |
@@ -8,2 +8,3 @@ import type { Aggregator, CustomDataView, Grouping, ItemMetadata, OnGroupCollapsedEventArgs, OnGroupExpandedEventArgs, OnRowCountChangedEventArgs, OnRowsChangedEventArgs, OnRowsOrCountChangedEventArgs, OnSelectedRowIdsChangedEventArgs, OnSetItemsCalledEventArgs, PagingInfo } from './models/index'; | ||
| inlineFilters: boolean; | ||
| useCSPSafeFilter: boolean; | ||
| } | ||
@@ -29,2 +30,3 @@ export type FilterFn<T> = (item: T, args: any) => boolean; | ||
| protected filter: FilterFn<TData> | null; | ||
| protected filterCSPSafe: Function | null; | ||
| protected updated: ({ | ||
@@ -44,3 +46,5 @@ [id: DataIdType]: boolean; | ||
| protected compiledFilter?: FilterFn<TData> | null; | ||
| protected compiledFilterCSPSafe?: Function | null; | ||
| protected compiledFilterWithCaching?: FilterFn<TData> | null; | ||
| protected compiledFilterWithCachingCSPSafe?: Function | null; | ||
| protected filterCache: any[]; | ||
@@ -122,3 +126,3 @@ protected _grid?: SlickGrid; | ||
| /** Get current Filter used by the DataView */ | ||
| getFilter(): FilterFn<TData> | null; | ||
| getFilter(): Function | null; | ||
| /** | ||
@@ -248,4 +252,6 @@ * Set a Filter that will be used by the DataView | ||
| protected compileAccumulatorLoop(aggregator: Aggregator): any; | ||
| protected compileFilter(): FilterFn<TData>; | ||
| protected compileFilterWithCaching(): any; | ||
| protected compileFilterCSPSafe(_items: TData[], _args: any): TData[]; | ||
| protected compileFilter(stopRunningIfCSPSafeIsActive?: boolean): FilterFn<TData>; | ||
| protected compileFilterWithCaching(stopRunningIfCSPSafeIsActive?: boolean): any; | ||
| protected compileFilterWithCachingCSPSafe(_items: TData[], _args: any, filterCache: any[]): TData[]; | ||
| /** | ||
@@ -252,0 +258,0 @@ * In ES5 we could set the function name on the fly but in ES6 this is forbidden and we need to set it through differently |
| import type SortableInstance from 'sortablejs'; | ||
| import type { AutoSize, CellViewportRange, Column, ColumnSort, CssStyleHash, CustomDataView, DOMEvent, DragPosition, DragRowMove, Editor, EditController, Formatter, FormatterResultObject, GridOption as BaseGridOption, InteractionBase, MultiColumnSort, OnActiveCellChangedEventArgs, OnAddNewRowEventArgs, OnAutosizeColumnsEventArgs, OnBeforeUpdateColumnsEventArgs, OnBeforeAppendCellEventArgs, OnBeforeCellEditorDestroyEventArgs, OnBeforeColumnsResizeEventArgs, OnBeforeEditCellEventArgs, OnBeforeHeaderCellDestroyEventArgs, OnBeforeHeaderRowCellDestroyEventArgs, OnBeforeFooterRowCellDestroyEventArgs, OnBeforeSetColumnsEventArgs, OnCellChangeEventArgs, OnCellCssStylesChangedEventArgs, OnColumnsDragEventArgs, OnColumnsReorderedEventArgs, OnColumnsResizedEventArgs, OnColumnsResizeDblClickEventArgs, OnCompositeEditorChangeEventArgs, OnClickEventArgs, OnDblClickEventArgs, OnFooterContextMenuEventArgs, OnFooterRowCellRenderedEventArgs, OnHeaderCellRenderedEventArgs, OnFooterClickEventArgs, OnHeaderClickEventArgs, OnHeaderContextMenuEventArgs, OnHeaderMouseEventArgs, OnHeaderRowCellRenderedEventArgs, OnKeyDownEventArgs, OnValidationErrorEventArgs, OnRenderedEventArgs, OnSelectedRowsChangedEventArgs, OnSetOptionsEventArgs, OnActivateChangedOptionsEventArgs, OnScrollEventArgs, PagingInfo, RowInfo, SelectionModel, SingleColumnSort, SlickGridEventData, SlickPlugin } from './models/index'; | ||
| import type { AutoSize, CellViewportRange, Column, ColumnSort, CssStyleHash, CustomDataView, DOMEvent, DragPosition, DragRowMove, Editor, EditController, Formatter, FormatterResultWithHtml, FormatterResultWithText, GridOption as BaseGridOption, InteractionBase, MultiColumnSort, OnActiveCellChangedEventArgs, OnAddNewRowEventArgs, OnAutosizeColumnsEventArgs, OnBeforeUpdateColumnsEventArgs, OnBeforeAppendCellEventArgs, OnBeforeCellEditorDestroyEventArgs, OnBeforeColumnsResizeEventArgs, OnBeforeEditCellEventArgs, OnBeforeHeaderCellDestroyEventArgs, OnBeforeHeaderRowCellDestroyEventArgs, OnBeforeFooterRowCellDestroyEventArgs, OnBeforeSetColumnsEventArgs, OnCellChangeEventArgs, OnCellCssStylesChangedEventArgs, OnColumnsDragEventArgs, OnColumnsReorderedEventArgs, OnColumnsResizedEventArgs, OnColumnsResizeDblClickEventArgs, OnCompositeEditorChangeEventArgs, OnClickEventArgs, OnDblClickEventArgs, OnFooterContextMenuEventArgs, OnFooterRowCellRenderedEventArgs, OnHeaderCellRenderedEventArgs, OnFooterClickEventArgs, OnHeaderClickEventArgs, OnHeaderContextMenuEventArgs, OnHeaderMouseEventArgs, OnHeaderRowCellRenderedEventArgs, OnKeyDownEventArgs, OnValidationErrorEventArgs, OnRenderedEventArgs, OnSelectedRowsChangedEventArgs, OnSetOptionsEventArgs, OnActivateChangedOptionsEventArgs, OnScrollEventArgs, PagingInfo, RowInfo, SelectionModel, SingleColumnSort, SlickGridEventData, SlickPlugin } from './models/index'; | ||
| import { BindingEventService as BindingEventService_, type SlickEditorLock, SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickRange as SlickRange_ } from './slick.core'; | ||
@@ -13,3 +13,3 @@ /** | ||
| * | ||
| * SlickGrid v5.4.2 | ||
| * SlickGrid v5.5.0 | ||
| * | ||
@@ -289,2 +289,11 @@ * NOTES: | ||
| init(): void; | ||
| /** | ||
| * Apply HTML code by 3 different ways depending on what is provided as input and what options are enabled. | ||
| * 1. value is an HTMLElement, then simply append the HTML to the target element. | ||
| * 2. value is string and `enableHtmlRendering` is enabled, then use `target.innerHTML = value;` | ||
| * 3. value is string and `enableHtmlRendering` is disabled, then use `target.textContent = value;` | ||
| * @param target - target element to apply to | ||
| * @param val - input value can be either a string or an HTMLElement | ||
| */ | ||
| applyHtmlCode(target: HTMLElement, val: string | HTMLElement): void; | ||
| protected initialize(): void; | ||
@@ -360,3 +369,3 @@ protected finishInitialization(): void; | ||
| */ | ||
| updateColumnHeader(columnId: number | string, title?: string, toolTip?: string): void; | ||
| updateColumnHeader(columnId: number | string, title?: string | HTMLElement, toolTip?: string): void; | ||
| /** | ||
@@ -588,4 +597,4 @@ * Get the Header DOM element | ||
| protected getDataItemValueForColumn(item: TData, columnDef: C): TData | TData[keyof TData]; | ||
| protected appendRowHtml(stringArrayL: string[], stringArrayR: string[], row: number, range: CellViewportRange, dataLength: number): void; | ||
| protected appendCellHtml(stringArray: string[], row: number, cell: number, colspan: number, item: TData): void; | ||
| protected appendRowHtml(divArrayL: HTMLElement[], divArrayR: HTMLElement[], row: number, range: CellViewportRange, dataLength: number): void; | ||
| protected appendCellHtml(divRow: HTMLElement, row: number, cell: number, colspan: number, item: TData): void; | ||
| protected cleanupRows(rangeToKeep: { | ||
@@ -613,3 +622,3 @@ bottom: number; | ||
| /** Apply a Formatter Result to a Cell DOM Node */ | ||
| applyFormatResultToCellNode(formatterResult: FormatterResultObject | string, cellNode: HTMLDivElement, suppressRemove?: boolean): void; | ||
| applyFormatResultToCellNode(formatterResult: FormatterResultWithHtml | FormatterResultWithText | string | HTMLElement, cellNode: HTMLDivElement, suppressRemove?: boolean): void; | ||
| /** | ||
@@ -616,0 +625,0 @@ * Update a specific cell by its row and column index |
| { | ||
| "name": "slickgrid", | ||
| "version": "5.4.2", | ||
| "version": "5.5.0", | ||
| "description": "A lightning fast JavaScript grid/spreadsheet", | ||
| "main": "./dist/browser/index.js", | ||
| "module": "./dist/esm/index.js", | ||
| "types": "index.d.ts", | ||
| "typesVersions": { | ||
| ">=4.2": { | ||
| "*": [ | ||
| "dist/types/*" | ||
| ] | ||
| } | ||
| }, | ||
| "exports": { | ||
| ".": { | ||
| "import": "./dist/esm/index.js", | ||
| "types": "./dist/types/index.d.ts", | ||
| "node": "./dist/cjs/index.js", | ||
| "require": "./dist/cjs/index.js", | ||
| "default": "./dist/esm/index.js" | ||
| }, | ||
| "./*": "./*" | ||
| "./dist/styles/*": "./dist/styles/*", | ||
| "./package.json": "./package.json" | ||
| }, | ||
| "typesVersions": { | ||
| "*": { | ||
| "*": [ | ||
| "./dist/types/index.d.ts" | ||
| ] | ||
| } | ||
| }, | ||
| "types": "dist/types/index.d.ts", | ||
| "main": "dist/browser/index.js", | ||
| "module": "dist/esm/index.js", | ||
| "directories": { | ||
@@ -24,0 +26,0 @@ "example": "examples", |
@@ -57,3 +57,3 @@ import { BindingEventService as BindingEventService_, Event as SlickEvent_, Utils as Utils_ } from '../slick.core'; | ||
| syncResizeTitle: 'Synchronous resize', | ||
| headerColumnValueExtractor: (columnDef: Column) => columnDef.name || '' | ||
| headerColumnValueExtractor: (columnDef: Column) => columnDef.name instanceof HTMLElement ? columnDef.name.innerHTML : columnDef.name || '' | ||
| }; | ||
@@ -134,2 +134,5 @@ | ||
| columnId = this.columns[i].id; | ||
| const colName: string = this.columns[i].name instanceof HTMLElement | ||
| ? (this.columns[i].name as HTMLElement).innerHTML | ||
| : (this.columns[i].name || '') as string; | ||
| excludeCssClass = this.columns[i].excludeFromColumnPicker ? "hidden" : ""; | ||
@@ -139,3 +142,3 @@ | ||
| liElm.className = excludeCssClass; | ||
| liElm.ariaLabel = this.columns[i]?.name || ''; | ||
| liElm.ariaLabel = colName; | ||
@@ -154,11 +157,9 @@ const checkboxElm = document.createElement('input'); | ||
| if (this._options?.columnPicker?.headerColumnValueExtractor) { | ||
| columnLabel = this._options.columnPicker.headerColumnValueExtractor(this.columns[i], this._options); | ||
| } else { | ||
| columnLabel = this._defaults.headerColumnValueExtractor!(this.columns[i], this._options); | ||
| } | ||
| columnLabel = (this._options?.columnPicker?.headerColumnValueExtractor) | ||
| ? this._options.columnPicker.headerColumnValueExtractor(this.columns[i], this._options) | ||
| : this._defaults.headerColumnValueExtractor!(this.columns[i], this._options); | ||
| const labelElm = document.createElement('label'); | ||
| labelElm.htmlFor = `${this._gridUid}colpicker-${columnId}`; | ||
| labelElm.innerHTML = columnLabel; | ||
| labelElm.innerHTML = this.grid.sanitizeHtmlString(columnLabel); | ||
| liElm.appendChild(labelElm); | ||
@@ -256,3 +257,3 @@ this._listElm.appendChild(liElm); | ||
| if (this._columnTitleElm?.innerHTML) { | ||
| this._columnTitleElm.innerHTML = pickerOptions.columnTitle; | ||
| this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(pickerOptions.columnTitle); | ||
| } | ||
@@ -259,0 +260,0 @@ } |
@@ -58,3 +58,3 @@ import { BindingEventService as BindingEventService_, Event as SlickEvent_, Utils as Utils_ } from '../slick.core'; | ||
| syncResizeTitle: 'Synchronous resize', | ||
| headerColumnValueExtractor: (columnDef: Column) => columnDef.name || '' | ||
| headerColumnValueExtractor: (columnDef: Column) => columnDef.name instanceof HTMLElement ? columnDef.name.innerHTML : columnDef.name || '' | ||
| }; | ||
@@ -135,2 +135,5 @@ | ||
| columnId = this.columns[i].id; | ||
| const colName: string = this.columns[i].name instanceof HTMLElement | ||
| ? (this.columns[i].name as HTMLElement).innerHTML | ||
| : (this.columns[i].name || '') as string; | ||
| excludeCssClass = this.columns[i].excludeFromColumnPicker ? 'hidden' : ''; | ||
@@ -140,3 +143,3 @@ | ||
| liElm.className = excludeCssClass; | ||
| liElm.ariaLabel = this.columns[i]?.name || ''; | ||
| liElm.ariaLabel = colName; | ||
@@ -155,11 +158,9 @@ const checkboxElm = document.createElement('input'); | ||
| if (this._gridOptions?.columnPicker?.headerColumnValueExtractor) { | ||
| columnLabel = this._gridOptions.columnPicker.headerColumnValueExtractor(this.columns[i], this._gridOptions); | ||
| } else { | ||
| columnLabel = this._defaults.headerColumnValueExtractor!(this.columns[i], this._gridOptions); | ||
| } | ||
| columnLabel = (this._gridOptions?.columnPicker?.headerColumnValueExtractor) | ||
| ? this._gridOptions.columnPicker.headerColumnValueExtractor(this.columns[i], this._gridOptions) | ||
| : this._defaults.headerColumnValueExtractor!(this.columns[i], this._gridOptions); | ||
| const labelElm = document.createElement('label'); | ||
| labelElm.htmlFor = `${this._gridUid}colpicker-${columnId}`; | ||
| labelElm.innerHTML = columnLabel; | ||
| labelElm.innerHTML = this.grid.sanitizeHtmlString(columnLabel); | ||
| liElm.appendChild(labelElm); | ||
@@ -257,3 +258,3 @@ this._listElm.appendChild(liElm); | ||
| if (this._columnTitleElm?.innerHTML) { | ||
| this._columnTitleElm.innerHTML = pickerOptions.columnTitle; | ||
| this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(pickerOptions.columnTitle); | ||
| } | ||
@@ -260,0 +261,0 @@ } |
@@ -170,3 +170,3 @@ import type { | ||
| useClickToRepositionMenu: true, | ||
| headerColumnValueExtractor: (columnDef: Column) => columnDef.name as string, | ||
| headerColumnValueExtractor: (columnDef: Column) => columnDef.name instanceof HTMLElement ? columnDef.name.innerHTML : columnDef.name || '', | ||
| }; | ||
@@ -397,3 +397,3 @@ | ||
| this._commandTitleElm.className = 'title'; | ||
| this._commandTitleElm.innerHTML = (this._gridMenuOptions.commandTitle || this._gridMenuOptions.customTitle) as string; | ||
| this._commandTitleElm.innerHTML = this.grid.sanitizeHtmlString((this._gridMenuOptions.commandTitle || this._gridMenuOptions.customTitle) as string); | ||
| commandListElm.appendChild(this._commandTitleElm); | ||
@@ -466,3 +466,3 @@ } | ||
| textElm.className = 'slick-gridmenu-content'; | ||
| textElm.innerHTML = (item as GridMenuItem).title || ''; | ||
| textElm.innerHTML = this.grid.sanitizeHtmlString((item as GridMenuItem).title || ''); | ||
@@ -518,3 +518,3 @@ liElm.appendChild(textElm); | ||
| this._columnTitleElm.className = 'title'; | ||
| this._columnTitleElm.innerHTML = this._gridMenuOptions.columnTitle; | ||
| this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(this._gridMenuOptions.columnTitle); | ||
| this._menuElm.appendChild(this._columnTitleElm); | ||
@@ -572,6 +572,9 @@ } | ||
| excludeCssClass = this.columns[i].excludeFromGridMenu ? 'hidden' : ''; | ||
| const colName: string = this.columns[i].name instanceof HTMLElement | ||
| ? (this.columns[i].name as HTMLElement).innerHTML | ||
| : (this.columns[i].name || '') as string; | ||
| const liElm = document.createElement('li'); | ||
| liElm.className = excludeCssClass; | ||
| liElm.ariaLabel = this.columns[i]?.name || ''; | ||
| liElm.ariaLabel = colName; | ||
@@ -591,11 +594,9 @@ const checkboxElm = document.createElement('input'); | ||
| // get the column label from the picker value extractor (user can optionally provide a custom extractor) | ||
| if (this._gridMenuOptions?.headerColumnValueExtractor) { | ||
| columnLabel = this._gridMenuOptions.headerColumnValueExtractor(this.columns[i], this._gridOptions); | ||
| } else { | ||
| columnLabel = this._defaults.headerColumnValueExtractor!(this.columns[i]); | ||
| } | ||
| columnLabel = (this._gridMenuOptions?.headerColumnValueExtractor) | ||
| ? this._gridMenuOptions.headerColumnValueExtractor(this.columns[i], this._gridOptions) | ||
| : this._defaults.headerColumnValueExtractor!(this.columns[i]); | ||
| const labelElm = document.createElement('label'); | ||
| labelElm.htmlFor = `${this._gridUid}-gridmenu-colpicker-${columnId}`; | ||
| labelElm.innerHTML = columnLabel || ''; | ||
| labelElm.innerHTML = this.grid.sanitizeHtmlString(columnLabel || ''); | ||
| liElm.appendChild(labelElm); | ||
@@ -769,6 +770,6 @@ this._listElm.appendChild(liElm); | ||
| if (this._commandTitleElm?.innerHTML) { | ||
| this._commandTitleElm.innerHTML = gridMenuOptions.commandTitle || gridMenuOptions.customTitle || ''; | ||
| this._commandTitleElm.innerHTML = this.grid.sanitizeHtmlString(gridMenuOptions.commandTitle || gridMenuOptions.customTitle || ''); | ||
| } | ||
| if (this._columnTitleElm?.innerHTML) { | ||
| this._columnTitleElm.innerHTML = gridMenuOptions.columnTitle || ''; | ||
| this._columnTitleElm.innerHTML = this.grid.sanitizeHtmlString(gridMenuOptions.columnTitle || ''); | ||
| } | ||
@@ -775,0 +776,0 @@ } |
@@ -8,3 +8,4 @@ import type { | ||
| Formatter, | ||
| FormatterResultObject, | ||
| FormatterResultWithHtml, | ||
| FormatterResultWithText, | ||
| GroupTotalsFormatter, | ||
@@ -29,3 +30,3 @@ Grouping, | ||
| export type FormatterOverrideCallback = (row: number, cell: number, val: any, columnDef: Column, item: any, grid: SlickGrid) => string | FormatterResultObject; | ||
| export type FormatterOverrideCallback = (row: number, cell: number, val: any, columnDef: Column, item: any, grid: SlickGrid) => string | FormatterResultWithHtml | FormatterResultWithText; | ||
@@ -148,3 +149,3 @@ export interface Column<TData = any> { | ||
| /** Column Title Name to be displayed in the Grid (UI) */ | ||
| name?: string; | ||
| name?: string | HTMLElement; | ||
@@ -151,0 +152,0 @@ /** column offset width */ |
@@ -1,2 +0,2 @@ | ||
| import type { CellRange, Column, FormatterResultObject, } from './index'; | ||
| import type { CellRange, Column, FormatterResultWithHtml, FormatterResultWithText } from './index'; | ||
| import type { SlickEventData } from '../slick.core'; | ||
@@ -18,6 +18,6 @@ | ||
| /** option to specify a custom column value extractor function */ | ||
| dataItemColumnValueExtractor?: (item: any, columnDef: Column<T>) => string | FormatterResultObject | null; | ||
| dataItemColumnValueExtractor?: (item: any, columnDef: Column<T>) => string | FormatterResultWithHtml | FormatterResultWithText | null; | ||
| /** option to specify a custom column value setter function */ | ||
| dataItemColumnValueSetter?: (item: any, columnDef: Column<T>, value: any) => string | FormatterResultObject | null; | ||
| dataItemColumnValueSetter?: (item: any, columnDef: Column<T>, value: any) => string | FormatterResultWithHtml | FormatterResultWithText | null; | ||
@@ -24,0 +24,0 @@ /** option to specify a custom handler for paste actions */ |
@@ -1,4 +0,4 @@ | ||
| import type { Column, FormatterResultObject } from './index'; | ||
| import type { Column, FormatterResultWithHtml, FormatterResultWithText } from './index'; | ||
| import type { SlickGrid } from '../slick.grid'; | ||
| export declare type Formatter<T = any> = (row: number, cell: number, value: any, columnDef: Column<T>, dataContext: T, grid: SlickGrid) => string | FormatterResultObject; | ||
| export declare type Formatter<T = any> = (row: number, cell: number, value: any, columnDef: Column<T>, dataContext: T, grid: SlickGrid) => string | HTMLElement | FormatterResultWithHtml | FormatterResultWithText; |
@@ -8,7 +8,14 @@ export interface FormatterResultObject { | ||
| /** Optional tooltip text when hovering the cell div container. */ | ||
| toolTip?: string; | ||
| } | ||
| export interface FormatterResultWithText extends FormatterResultObject { | ||
| /** Text to be displayed in the cell, basically the formatter output. */ | ||
| text: string; | ||
| } | ||
| /** Optional tooltip text when hovering the cell div container. */ | ||
| toolTip?: string; | ||
| export interface FormatterResultWithHtml extends FormatterResultObject { | ||
| /** Text to be displayed in the cell, basically the formatter output. */ | ||
| html: HTMLElement; | ||
| } |
@@ -47,2 +47,7 @@ import type { Column as BaseColumn, CellMenuOption, ColumnPickerOption, ColumnReorderFunction, ContextMenuOption, CustomTooltipOption, EditCommand, Editor, ExcelCopyBufferOption, Formatter, GridMenuOption, ItemMetadata, } from './index'; | ||
| /** | ||
| * Added for CSP header because of dynamic css generation. | ||
| */ | ||
| nonce?: string; | ||
| /** | ||
| * Defaults to false, when enabled will try to commit the current edit without focusing on the next row. | ||
@@ -154,2 +159,9 @@ * If a custom editor is implemented and the grid cannot auto commit, you must use this option to implement it yourself | ||
| /** | ||
| * Defaults to true, do we want to allow passing HTML string to cell/row rendering by using `innerHTML`. | ||
| * When this is enabled and input is a string, it will use `innerHTML = 'some html'` to render the input, however when disable it will use `textContent = 'some html'`. | ||
| * Note: for strict CSP, you would want to disable this option and convert all your custom Formatters to return an HTMLElement instead of a string | ||
| */ | ||
| enableHtmlRendering?: boolean; | ||
| /** | ||
| * Do we want to always enable the mousewheel scroll handler? | ||
@@ -156,0 +168,0 @@ * In other words, do we want the mouse scrolling would work from anywhere. |
@@ -24,2 +24,5 @@ import type { SlickCellRangeSelector } from '../plugins/slick.cellrangeselector'; | ||
| /** A CSS class to be added to the cell container. */ | ||
| containerCssClass?: string; | ||
| /** Column definition id(defaults to "_move") */ | ||
@@ -26,0 +29,0 @@ columnId?: string; |
@@ -100,3 +100,4 @@ import type { AutoTooltipOption, Column, SlickPlugin } from '../models/index'; | ||
| if (node && !(column?.toolTip)) { | ||
| node.title = (targetElm.clientWidth < node.clientWidth) ? column?.name ?? '' : ''; | ||
| const titleVal = (targetElm.clientWidth < node.clientWidth) ? column?.name ?? '' : ''; | ||
| node.title = titleVal instanceof HTMLElement ? titleVal.innerHTML : titleVal; | ||
| } | ||
@@ -103,0 +104,0 @@ } |
@@ -391,3 +391,6 @@ import type { CellRange, Column, CssStyleHash, ExcelCopyBufferOption, ExternalCopyClipCommand, SlickPlugin } from '../models/index'; | ||
| for (let j = range.fromCell; j < range.toCell + 1; j++) { | ||
| if (columns[j].name!.length > 0 && !columns[j].hidden) { | ||
| const colName: string = columns[j].name instanceof HTMLElement | ||
| ? (columns[j].name as HTMLElement).innerHTML | ||
| : columns[j].name as string; | ||
| if (colName.length > 0 && !columns[j].hidden) { | ||
| clipTextHeaders.push(this.getHeaderValueForColumn(columns[j])); | ||
@@ -400,3 +403,6 @@ } | ||
| for (let j = range.fromCell; j < range.toCell + 1; j++) { | ||
| if (columns[j].name!.length > 0 && !columns[j].hidden) { | ||
| const colName: string = columns[j].name instanceof HTMLElement | ||
| ? (columns[j].name as HTMLElement).innerHTML | ||
| : columns[j].name as string; | ||
| if (colName.length > 0 && !columns[j].hidden) { | ||
| clipTextCells.push(this.getDataItemValueForColumn(dt, columns[j], e)); | ||
@@ -403,0 +409,0 @@ } |
| import { SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickEventHandler as SlickEventHandler_, Utils as Utils_ } from '../slick.core'; | ||
| import type { Column, DOMEvent, DragRowMove, FormatterResultObject, CrossGridRowMoveManagerOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { Column, DOMEvent, DragRowMove, CrossGridRowMoveManagerOption, FormatterResultWithText, UsabilityOverrideFn } from '../models/index'; | ||
| import type { SlickGrid } from '../slick.grid'; | ||
@@ -259,3 +259,3 @@ | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultObject | string { | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultWithText | string { | ||
| if (!this.checkUsabilityOverride(row, dataContext, grid)) { | ||
@@ -262,0 +262,0 @@ return ''; |
@@ -1,2 +0,2 @@ | ||
| import type { CancellablePromiseWrapper, Column, CustomTooltipOption, DOMEvent, Formatter, GridOption } from '../models/index'; | ||
| import type { CancellablePromiseWrapper, Column, CustomTooltipOption, DOMEvent, Formatter, FormatterResultWithHtml, FormatterResultWithText, GridOption } from '../models/index'; | ||
| import { SlickEventHandler as SlickEventHandler_, Utils as Utils_ } from '../slick.core'; | ||
@@ -81,3 +81,3 @@ import type { SlickDataView } from '../slick.dataview'; | ||
| */ | ||
| export class CustomTooltip { | ||
| export class SlickCustomTooltip { | ||
| // -- | ||
@@ -433,5 +433,8 @@ // public API | ||
| if (typeof formatterOrText === 'function') { | ||
| const tooltipText = formatterOrText(cell.row, cell.cell, value, columnDef, item, this._grid); | ||
| const formatterText = (typeof tooltipText === 'object' && tooltipText?.text) ? tooltipText.text : (typeof tooltipText === 'string' ? tooltipText : ''); | ||
| return this._grid.sanitizeHtmlString(formatterText); | ||
| const tooltipResult = formatterOrText(cell.row, cell.cell, value, columnDef, item, this._grid); | ||
| let formatterText = (Object.prototype.toString.call(tooltipResult) !== '[object Object]' ? tooltipResult : (tooltipResult as FormatterResultWithHtml).html || (tooltipResult as FormatterResultWithText).text); | ||
| if (formatterText instanceof HTMLElement) { | ||
| formatterText = formatterText.outerHTML; | ||
| } | ||
| return this._grid.sanitizeHtmlString(formatterText as string); | ||
| } else if (typeof formatterOrText === 'string') { | ||
@@ -513,3 +516,3 @@ return this._grid.sanitizeHtmlString(formatterOrText); | ||
| Plugins: { | ||
| CustomTooltip | ||
| CustomTooltip: SlickCustomTooltip | ||
| } | ||
@@ -516,0 +519,0 @@ } |
| import { SlickEvent as SlickEvent_, SlickEventHandler as SlickEventHandler_, Utils as Utils_ } from '../slick.core'; | ||
| import type { Column, DOMEvent, FormatterResultObject, GridOption, OnAfterRowDetailToggleArgs, OnBeforeRowDetailToggleArgs, OnRowBackToViewportRangeArgs, OnRowDetailAsyncEndUpdateArgs, OnRowDetailAsyncResponseArgs, OnRowOutOfViewportRangeArgs, RowDetailViewOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { Column, DOMEvent, FormatterResultWithHtml, FormatterResultWithText, GridOption, OnAfterRowDetailToggleArgs, OnBeforeRowDetailToggleArgs, OnRowBackToViewportRangeArgs, OnRowDetailAsyncEndUpdateArgs, OnRowDetailAsyncResponseArgs, OnRowOutOfViewportRangeArgs, RowDetailViewOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { SlickDataView } from '../slick.dataview'; | ||
@@ -633,3 +633,3 @@ import type { SlickGrid } from '../slick.grid'; | ||
| /** The cell Formatter that shows the icon that will be used to toggle the Row Detail */ | ||
| protected detailSelectionFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultObject | string { | ||
| protected detailSelectionFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultWithHtml | FormatterResultWithText | string { | ||
| if (!this.checkExpandableOverride(row, dataContext, grid)) { | ||
@@ -636,0 +636,0 @@ return ''; |
| import { SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickEventHandler as SlickEventHandler_, Utils as Utils_ } from '../slick.core'; | ||
| import type { Column, DOMEvent, DragRowMove, FormatterResultObject, RowMoveManagerOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { Column, DOMEvent, DragRowMove, FormatterResultWithHtml, RowMoveManagerOption, UsabilityOverrideFn } from '../models/index'; | ||
| import type { SlickGrid } from '../slick.grid'; | ||
@@ -12,2 +12,3 @@ | ||
| * Row Move Manager options: | ||
| * containerCssClass: A CSS class to be added to the cell container. | ||
| * cssClass: A CSS class to be added to the div of the cell formatter. | ||
@@ -250,7 +251,12 @@ * columnId: Column definition id (defaults to "_move") | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultObject | string { | ||
| protected moveIconFormatter(row: number, _cell: number, _val: any, _column: Column, dataContext: any, grid: SlickGrid): FormatterResultWithHtml | string { | ||
| if (!this.checkUsabilityOverride(row, dataContext, grid)) { | ||
| return ''; | ||
| } else { | ||
| return { addClasses: `cell-reorder dnd ${this._options.cssClass || ''}`.trim(), text: '' }; | ||
| const iconElm = document.createElement('div'); | ||
| iconElm.className = this._options.cssClass || ''; | ||
| return { | ||
| addClasses: `cell-reorder dnd ${this._options.containerCssClass || ''}`, | ||
| html: iconElm | ||
| }; | ||
| } | ||
@@ -257,0 +263,0 @@ } |
@@ -39,2 +39,3 @@ import type { | ||
| inlineFilters: boolean; | ||
| useCSPSafeFilter: boolean; | ||
| } | ||
@@ -54,3 +55,4 @@ export type FilterFn<T> = (item: T, args: any) => boolean; | ||
| groupItemMetadataProvider: null, | ||
| inlineFilters: false | ||
| inlineFilters: false, | ||
| useCSPSafeFilter: false, | ||
| }; | ||
@@ -65,2 +67,3 @@ | ||
| protected filter: FilterFn<TData> | null = null; // filter function | ||
| protected filterCSPSafe: Function | null = null; // filter function | ||
| protected updated: ({ [id: DataIdType]: boolean }) | null = null; // updated item ids | ||
@@ -80,3 +83,5 @@ protected suspend = false; // suspends the recalculation | ||
| protected compiledFilter?: FilterFn<TData> | null; | ||
| protected compiledFilterCSPSafe?: Function | null; | ||
| protected compiledFilterWithCaching?: FilterFn<TData> | null; | ||
| protected compiledFilterWithCachingCSPSafe?: Function | null; | ||
| protected filterCache: any[] = []; | ||
@@ -154,2 +159,3 @@ protected _grid?: SlickGrid; // grid object will be defined only after using "syncGridSelection()" method" | ||
| this.filter = null as any; | ||
| this.filterCSPSafe = null as any; | ||
| this.updated = null as any; | ||
@@ -160,3 +166,5 @@ this.sortComparer = null as any; | ||
| this.compiledFilter = null; | ||
| this.compiledFilterCSPSafe = null; | ||
| this.compiledFilterWithCaching = null; | ||
| this.compiledFilterWithCachingCSPSafe = null; | ||
@@ -368,3 +376,3 @@ if (this._grid && this._grid.onSelectedRowsChanged && this._grid.onCellCssStylesChanged) { | ||
| getFilter() { | ||
| return this.filter; | ||
| return this._options.useCSPSafeFilter ? this.filterCSPSafe : this.filter; | ||
| } | ||
@@ -377,6 +385,9 @@ | ||
| setFilter(filterFn: FilterFn<TData>) { | ||
| this.filterCSPSafe = filterFn; | ||
| this.filter = filterFn; | ||
| if (this._options.inlineFilters) { | ||
| this.compiledFilter = this.compileFilter(); | ||
| this.compiledFilterWithCaching = this.compileFilterWithCaching(); | ||
| this.compiledFilterCSPSafe = this.compileFilterCSPSafe; | ||
| this.compiledFilterWithCachingCSPSafe = this.compileFilterWithCachingCSPSafe; | ||
| this.compiledFilter = this.compileFilter(this._options.useCSPSafeFilter); | ||
| this.compiledFilterWithCaching = this.compileFilterWithCaching(this._options.useCSPSafeFilter); | ||
| } | ||
@@ -1033,3 +1044,21 @@ this.refresh(); | ||
| protected compileFilter(): FilterFn<TData> { | ||
| protected compileFilterCSPSafe(_items: TData[], _args: any): TData[] { | ||
| if (typeof this.filterCSPSafe !== 'function') { | ||
| return []; | ||
| } | ||
| const _retval: TData[] = []; | ||
| const _il = _items.length; | ||
| for (let _i = 0; _i < _il; _i++) { | ||
| if (this.filterCSPSafe(_items[_i], _args)) { | ||
| _retval.push(_items[_i]); | ||
| } | ||
| } | ||
| return _retval; | ||
| } | ||
| protected compileFilter(stopRunningIfCSPSafeIsActive: boolean = false): FilterFn<TData> { | ||
| if(stopRunningIfCSPSafeIsActive) { | ||
| return null as any; | ||
| } | ||
| const filterInfo = this.getFunctionInfo(this.filter as Function); | ||
@@ -1065,3 +1094,2 @@ | ||
| tpl = tpl.replace(/\$args\$/gi, filterInfo.params[1]); | ||
| const fn: any = new Function("_items,_args", tpl); | ||
@@ -1074,3 +1102,7 @@ const fnName = "compiledFilter"; | ||
| protected compileFilterWithCaching() { | ||
| protected compileFilterWithCaching(stopRunningIfCSPSafeIsActive: boolean = false) { | ||
| if(stopRunningIfCSPSafeIsActive) { | ||
| return null as any; | ||
| } | ||
| const filterInfo = this.getFunctionInfo(this.filter as Function); | ||
@@ -1118,2 +1150,19 @@ | ||
| protected compileFilterWithCachingCSPSafe(_items: TData[], _args: any, filterCache: any[]): TData[] { | ||
| if (typeof this.filterCSPSafe !== 'function') { | ||
| return []; | ||
| } | ||
| const _retval: TData[] = []; | ||
| const _il = _items.length; | ||
| for (let _i = 0; _i < _il; _i++) { | ||
| if (filterCache[_i] || this.filterCSPSafe(_items[_i], _args)) { | ||
| _retval.push(_items[_i]); | ||
| } | ||
| } | ||
| return _retval; | ||
| } | ||
| /** | ||
@@ -1169,6 +1218,12 @@ * In ES5 we could set the function name on the fly but in ES6 this is forbidden and we need to set it through differently | ||
| protected getFilteredAndPagedItems(items: TData[]) { | ||
| if (this.filter) { | ||
| const batchFilter = (this._options.inlineFilters ? this.compiledFilter : this.uncompiledFilter) as Function; | ||
| const batchFilterWithCaching = (this._options.inlineFilters ? this.compiledFilterWithCaching : this.uncompiledFilterWithCaching) as Function; | ||
| if (this._options.useCSPSafeFilter ? this.filterCSPSafe : this.filter) { | ||
| let batchFilter: Function; | ||
| let batchFilterWithCaching: Function; | ||
| if (this._options.useCSPSafeFilter) { | ||
| batchFilter = (this._options.inlineFilters ? this.compiledFilterCSPSafe : this.uncompiledFilter) as Function; | ||
| batchFilterWithCaching = (this._options.inlineFilters ? this.compiledFilterWithCachingCSPSafe : this.uncompiledFilterWithCaching) as Function; | ||
| } else { | ||
| batchFilter = (this._options.inlineFilters ? this.compiledFilter : this.uncompiledFilter) as Function; | ||
| batchFilterWithCaching = (this._options.inlineFilters ? this.compiledFilterWithCaching : this.uncompiledFilterWithCaching) as Function; | ||
| } | ||
| if (this.refreshHints.isFilterNarrowing) { | ||
@@ -1234,3 +1289,3 @@ this.filteredItems = batchFilter.call(this, this.filteredItems, this.filterArgs); | ||
| // always considering them 'dirty' seems easier for the time being | ||
| ((item as SlickGroupTotals_).__groupTotals || (r as SlickGroupTotals_).__groupTotals)) | ||
| ((item as SlickGroupTotals_).__groupTotals || (r as SlickGroupTotals_).__groupTotals)) | ||
| || item[this.idProperty as keyof TData] !== r[this.idProperty as keyof TData] | ||
@@ -1237,0 +1292,0 @@ || (this.updated?.[item[this.idProperty as keyof TData]]) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.69%
6909031
- Lines of code
- increased by0.64%
57913
No dependency changes