active-table
Version:
Framework agnostic table component for editable data experience
1,091 lines • 457 kB
JavaScript
class GenericElementUtils {
static hideElements(...D) {
D.forEach((w) => w.style.display = "none");
}
static getStyleWidth(D, w) {
return Number.parseFloat(D.style[w]) || 0;
}
static doesElementExistInDom(D) {
return !!D.parentElement;
}
static isFirstChildInParent(D) {
var w;
return ((w = D.parentElement) == null ? void 0 : w.firstChild) === D;
}
}
GenericElementUtils.NOT_SELECTABLE_CLASS = "not-selectable";
class SVGIconUtils {
// REF-10
static createSVGElement(D) {
return new DOMParser().parseFromString(D, "image/svg+xml").documentElement;
}
}
SVGIconUtils.WHITE_FILTER = `brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(3877%)
hue-rotate(184deg) brightness(103%) contrast(100%)`;
SVGIconUtils.LIGHT_GREY_FILTER = `brightness(0) saturate(100%) invert(68%) sepia(0%) saturate(317%)
hue-rotate(84deg) brightness(92%) contrast(93%)`;
SVGIconUtils.HEADER_FILTER = `brightness(0) saturate(100%) invert(34%) sepia(0%) saturate(1075%)
hue-rotate(211deg) brightness(96%) contrast(90%)`;
SVGIconUtils.DROPDOWN_ITEM_FILTER = `brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(258%)
hue-rotate(63deg) brightness(99%) contrast(97%)`;
class StaticDropdown {
}
StaticDropdown.DROPDOWN_CLASS = "static-dropdown";
StaticDropdown.ITEM_CLASS = "static-dropdown-item";
StaticDropdown.ACTIVE_ITEM_CLASS = "active-static-dropdown-item";
const _DropdownItemHighlightUtils = class it {
// Accepted behaviour - fadeFocused is triggered twice when moving to a different item
static fadeCurrentlyHighlighted(D) {
const w = D.dropdownItem;
w && (w.classList.contains(StaticDropdown.ACTIVE_ITEM_CLASS) && w.classList.remove(StaticDropdown.ACTIVE_ITEM_CLASS), w.style.backgroundColor = "", delete D.dropdownItem);
}
static highlightNew(D, w) {
it.fadeCurrentlyHighlighted(D), w.focus(), D.dropdownItem = w, w.classList.contains(StaticDropdown.ITEM_CLASS) ? w.classList.add(StaticDropdown.ACTIVE_ITEM_CLASS) : w.classList.contains(DropdownItem.DROPDOWN_INPUT_CLASS) || (w.style.backgroundColor = it.HOVER_BACKGROUND_COLOR);
}
};
_DropdownItemHighlightUtils.HOVER_BACKGROUND_COLOR = "#eaeaea";
let DropdownItemHighlightUtils = _DropdownItemHighlightUtils;
class DropdownItemEvents {
// prettier-ignore
static addItemEvents(D, w) {
w.addEventListener(
"mouseenter",
DropdownItemHighlightUtils.highlightNew.bind(this, D, w)
), w.addEventListener(
"mouseleave",
DropdownItemHighlightUtils.fadeCurrentlyHighlighted.bind(this, D)
);
}
}
const _DropdownItem = class ee {
static toggleItem(D, w) {
D.style.display = w ? ee.DISPLAY : ee.HIDDEN;
}
static isDisplayed(D) {
return D.style.display === ee.DISPLAY;
}
static createDropdownItemBaseElement(D) {
const w = document.createElement(D);
return w.classList.add(ee.DROPDOWN_ITEM_IDENTIFIER), w;
}
static createItem(D) {
const w = ee.createDropdownItemBaseElement("div");
return D && (w.tabIndex = D.children.length), w.classList.add(ee.DROPDOWN_ITEM_CLASS, GenericElementUtils.NOT_SELECTABLE_CLASS), w;
}
// no need to sanitize paste as input element already does it
static addInputItem(D, w) {
const O = ee.createItem(w);
O.classList.add(ee.DROPDOWN_INPUT_ITEM_CLASS);
const x = ee.createDropdownItemBaseElement("input");
x.classList.add(ee.DROPDOWN_INPUT_CLASS), O.appendChild(x), w.appendChild(O), DropdownItemEvents.addItemEvents(D._activeOverlayElements, x);
}
// REF-10
static insertIcon(D, w) {
const { svgString: O, containerStyles: x } = w, U = document.createElement("div");
U.classList.add(ee.DROPDOWN_ITEM_ICON_CONTAINER_CLASS), Object.assign(U.style, x == null ? void 0 : x.dropdown);
const F = SVGIconUtils.createSVGElement(O);
F.style.filter = SVGIconUtils.DROPDOWN_ITEM_FILTER, U.appendChild(F), D.insertBefore(U, D.children[0]);
}
static addPlaneButtonItem(D, w, O) {
const x = ee.createItem(D), U = ee.createDropdownItemBaseElement("div");
return U.innerText = w || ee.DROPDOWN_ITEM_EMPTY_PLACEHOLDER_TEXT, w.trim() === "" && U.classList.add(ee.DROPDOWN_ITEM_EMPTY_CLASS), x.append(U), D && (O !== void 0 && D.children[O] ? D.insertBefore(x, D.children[O]) : D.appendChild(x)), x;
}
// prettier-ignore
static createButtonItemNoEvents(D, w, ...O) {
const x = ee.addPlaneButtonItem(D, w.text);
return w.iconSettings && ee.insertIcon(x, w.iconSettings), O.length > 0 && x.classList.add(...O), x;
}
static addTitle(D, w) {
const O = ee.createDropdownItemBaseElement("div");
O.classList.add(ee.DROPDOWN_ITEM_CLASS, ee.DROPDOWN_TITLE_ITEM_CLASS), O.innerText = w, D.appendChild(O);
}
static addDivider(D) {
const w = ee.createDropdownItemBaseElement("div");
w.classList.add(ee.DROPDOWN_ITEM_DIVIDER_CLASS), D.appendChild(w);
}
// prettier-ignore
static addButtonItem(D, w, O, ...x) {
const U = ee.createButtonItemNoEvents(w, O, ...x);
return DropdownItemEvents.addItemEvents(D._activeOverlayElements, U), U;
}
// prettier-ignore
static addNewButtonItems(D, w, O) {
return O.map((x) => ee.addButtonItem(D, w, x));
}
static addButtonItemElements(D, w, O) {
O.forEach((x) => {
x.tabIndex = w.children.length, w.appendChild(x), DropdownItemEvents.addItemEvents(D._activeOverlayElements, x);
});
}
static removeItems(D) {
Array.from(D.children).forEach((w) => w.remove());
}
static doesElementContainItemClass(D) {
return D.classList.contains(ee.DROPDOWN_ITEM_IDENTIFIER);
}
static doesElementContainInputClass(D) {
return D.classList.contains(ee.DROPDOWN_INPUT_CLASS);
}
static getInputElement(D) {
return D.getElementsByClassName(ee.DROPDOWN_INPUT_ITEM_CLASS)[0];
}
static toggleUsability(D, w) {
const O = D.children[0];
w ? (D.classList.remove(ee.DISABLED_ITEM_CLASS), O.style.filter = "") : (D.classList.add(ee.DISABLED_ITEM_CLASS), O.style.filter = SVGIconUtils.LIGHT_GREY_FILTER);
}
};
_DropdownItem.DROPDOWN_ITEM_CLASS = "dropdown-item";
_DropdownItem.DISABLED_ITEM_CLASS = "dropdown-disabled-item";
_DropdownItem.ACTIVE_ITEM_CLASS = "active-dropdown-item";
_DropdownItem.DROPDOWN_INPUT_CLASS = "dropdown-input";
_DropdownItem.DROPDOWN_ITEM_ICON_CONTAINER_CLASS = "dropdown-item-icon-container";
_DropdownItem.DROPDOWN_INPUT_ITEM_CLASS = "dropdown-input-item";
_DropdownItem.DROPDOWN_TITLE_ITEM_CLASS = "dropdown-title-item";
_DropdownItem.DROPDOWN_ITEM_DIVIDER_CLASS = "dropdown-item-divider";
_DropdownItem.DROPDOWN_ITEM_EMPTY_CLASS = "dropdown-item-empty";
_DropdownItem.DROPDOWN_ITEM_EMPTY_PLACEHOLDER_TEXT = "...";
_DropdownItem.DROPDOWN_ITEM_IDENTIFIER = "dropdown-item-identifier";
_DropdownItem.HIDDEN = "none";
_DropdownItem.DISPLAY = "";
let DropdownItem = _DropdownItem;
class OuterDropdownItem {
static unsetHoverColors(D) {
D.forEach((w) => w.style.backgroundColor = "");
}
static unsetActiveItem(D) {
const w = D.getElementsByClassName(DropdownItem.ACTIVE_ITEM_CLASS)[0];
w == null || w.classList.remove(DropdownItem.ACTIVE_ITEM_CLASS);
}
static setActive(D, w) {
const O = D.find((x) => x.innerText === w);
O == null || O.classList.add(DropdownItem.ACTIVE_ITEM_CLASS);
}
static setActiveByIndex(D, w) {
D[w].classList.add(DropdownItem.ACTIVE_ITEM_CLASS);
}
}
class ElementStyle {
static setStyle(D, w, O) {
D.style[w] = O;
}
// prettier-ignore
static moveStyles(D, w, ...O) {
O.forEach((x) => {
D.style[x] && ElementStyle.setStyle(w, x, D.style[x]);
});
}
static unsetStyle(D, w) {
const O = Object.keys(w).reduce((x, U) => (x[U] = "", x), {});
Object.assign(D.style, O);
}
static unsetAllCSSStates(D, w) {
w.click && ElementStyle.unsetStyle(D, w.click), w.hover && ElementStyle.unsetStyle(D, w.hover), w.default && ElementStyle.unsetStyle(D, w.default);
}
static generateStatefulCSS(D, w, O) {
const x = D.default || {}, U = Object.assign(JSON.parse(JSON.stringify({ ...x, ...w })), D == null ? void 0 : D.hover), F = Object.assign(JSON.parse(JSON.stringify({ ...U, ...O })), D == null ? void 0 : D.click);
return { default: x, hover: U, click: F };
}
}
const _ToggleableElement = class Te {
static set(D, w) {
D.classList.add(Te.ACTIVE_BUTTON_CLASS), Object.assign(D.style, w);
}
static unset(D, w) {
D.classList.remove(Te.ACTIVE_BUTTON_CLASS), ElementStyle.unsetStyle(D, w);
}
static toggleActive(D, w) {
const O = !!D.classList.contains(Te.ACTIVE_BUTTON_CLASS);
return O ? (Te.unset(D, w), D.dispatchEvent(new MouseEvent("mouseenter"))) : Te.set(D, w), O;
}
static unsetActive(D, w) {
!!D.classList.contains(Te.ACTIVE_BUTTON_CLASS) && (Te.unset(D, w), D.dispatchEvent(new MouseEvent("mouseleave")));
}
static setActive(D, w) {
!!D.classList.contains(Te.ACTIVE_BUTTON_CLASS) || Te.set(D, w);
}
};
_ToggleableElement.ACTIVE_BUTTON_CLASS = "toggleable-button-active";
_ToggleableElement.AUTO_STYLING_CLASS = "toggleable-button-auto-styling";
let ToggleableElement = _ToggleableElement;
const _Dropdown = class ve {
static createBase() {
const D = document.createElement("div");
return D.classList.add(ve.DROPDOWN_CLASS), D.style.width = `${ve.DROPDOWN_WIDTH}px`, D.style.paddingTop = ve.DROPDOWN_VERTICAL_PX, D.style.paddingBottom = ve.DROPDOWN_VERTICAL_PX, ve.hide(D), D;
}
static isDisplayed(D) {
return (D == null ? void 0 : D.style.display) === ve.CSS_DISPLAY_VISIBLE;
}
static display(...D) {
D.forEach((w) => {
w.style.display = ve.CSS_DISPLAY_VISIBLE;
});
}
static hide(...D) {
GenericElementUtils.hideElements(...D);
}
static isPartOfDropdownElement(D) {
return D.classList.contains(ve.DROPDOWN_CLASS) || DropdownItem.doesElementContainItemClass(D);
}
};
_Dropdown.DROPDOWN_CLASS = "active-table-dropdown";
_Dropdown.CSS_DISPLAY_VISIBLE = "grid";
_Dropdown.DROPDOWN_WIDTH = 176;
_Dropdown.DROPDOWN_VERTICAL_PX = "4px";
let Dropdown = _Dropdown;
const _OuterDropdownButtonEvents = class xe {
static mouseClickButton(D, w, O) {
const { element: x } = w;
x.classList.contains(xe.DO_NOT_DISPLAY_DROPDOWN_CLASS) ? x.classList.remove(xe.DO_NOT_DISPLAY_DROPDOWN_CLASS) : O(D, w);
}
static mouseDownButton(D) {
const { element: w, button: O, activeButtonStyle: x } = D;
Dropdown.isDisplayed(w) && (w.classList.add(xe.DO_NOT_DISPLAY_DROPDOWN_CLASS), ToggleableElement.unsetActive(O, x));
}
static getDisplayFunc(D) {
return D.startsWith("top") ? OuterDropdownElement.display : OuterDropdownElement.displayReactToBottomVisibility;
}
// prettier-ignore
static set(D, w, O, x, U) {
const F = U || xe.getDisplayFunc(O);
w.addEventListener("mousedown", xe.mouseDownButton.bind(this, x)), w.addEventListener(
"click",
xe.mouseClickButton.bind(this, D, x, F)
);
}
};
_OuterDropdownButtonEvents.DO_NOT_DISPLAY_DROPDOWN_CLASS = "do-not-display-class";
let OuterDropdownButtonEvents = _OuterDropdownButtonEvents;
const VH = "vh", VW = "vw";
class LITElementTypeConverters {
static convertToBoolean(Y) {
return typeof Y == "string" ? Y === "true" : !!Y;
}
static convertToFunction(value) {
if (typeof value == "function")
return value;
if (typeof value == "string") {
const evaluatedExpression = eval(value);
if (typeof evaluatedExpression == "function")
return evaluatedExpression;
}
return () => {
};
}
}
class ObjectUtils {
static createTwoWayObject(D) {
return Object.keys(D).forEach((w) => {
D[D[w]] = w;
}), D;
}
static convertStringToFunction(D, w) {
typeof D[w] == "string" && (D[w] = LITElementTypeConverters.convertToFunction(
D[w]
));
}
// method to check if value is not nullish
static areValuesFullyDefined(...D) {
return D.findIndex((O) => O == null) === -1;
}
static removeProperties(D, ...w) {
w.forEach((O) => {
delete D[O];
});
}
}
class RegexUtils {
static extractIntegerStrs(D) {
return D.match(/\d+/g);
}
static extractFloatStrs(D) {
return D.match(/-?\d+(\.\d+)?$/g);
}
}
class StringDimensionUtils {
static processDimension(D, w) {
return D < w ? w : D;
}
// prettier-ignore
static processPercentageDimension(D, w, O, x) {
w > 100 && (w = 100);
const F = (O ? D.getBoundingClientRect().width : D.offsetHeight) * (w / 100);
return { number: StringDimensionUtils.processDimension(F, x), isPercentage: !0 };
}
// can also parse numbers incase the client used that
// if this returns a number 0 for a %, the likelyhood is that the parent element does not have that dimension set
// prettier-ignore
static generateNumberDimensionFromClientString(D, w, O, x, U = 0) {
const F = w[O], W = typeof F == "string";
let G = W ? Number(RegexUtils.extractIntegerStrs(F)[0]) : F;
if (W) {
if (F.includes("%"))
return StringDimensionUtils.processPercentageDimension(D, G, x, U);
F.includes(VH) ? G = window.innerHeight * (G / 100) : F.includes(VW) && (G = window.innerWidth * (G / 100));
}
return { number: StringDimensionUtils.processDimension(G, U), isPercentage: !1 };
}
static removeAllDimensions(D) {
if (D)
return ObjectUtils.removeProperties(D, "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"), D;
}
}
class PageButtonStyle {
// prettier-ignore
static unsetAllCSSStates(D, w, O) {
ElementStyle.unsetAllCSSStates(D, w[O]);
}
static unsetAll(D, w, O) {
D.classList.contains(w.activeButtonClass) ? PageButtonStyle.unsetAllCSSStates(D, w, "activeButton") : D.classList.contains(PageButtonElement.DISABLED_PAGINATION_BUTTON_CLASS) ? ElementStyle.unsetStyle(D, w.disabledButtons) : PageButtonStyle.unsetAllCSSStates(D, w, O ? "actionButtons" : "buttons");
}
static setDefault(D, w, O) {
PageButtonStyle.unsetAll(D, w, O), O ? Object.assign(D.style, w.actionButtons.default) : Object.assign(D.style, w.buttons.default);
}
// prettier-ignore
static setActive(D, w, O) {
O && (PageButtonStyle.unsetAllCSSStates(O, w, "activeButton"), Object.assign(O.style, w.buttons.default)), D.classList.contains(PageButtonElement.DISABLED_PAGINATION_BUTTON_CLASS) ? ElementStyle.unsetStyle(D, w.disabledButtons) : PageButtonStyle.unsetAllCSSStates(D, w, "buttons"), Object.assign(D.style, w.activeButton.default);
}
static setDisabled(D, w, O) {
PageButtonStyle.setDefault(D, w, O), Object.assign(D.style, w.disabledButtons);
}
static mouseDown(D, w, O) {
D.classList.contains(w.activeButtonClass) ? Object.assign(D.style, w.activeButton.click) : O ? Object.assign(D.style, w.actionButtons.click) : Object.assign(D.style, w.buttons.click), PaginationVisibleButtonsUtils.overrideOnMouseEvent(D, w);
}
static mouseEnter(D, w, O) {
D.classList.contains(PageButtonElement.DISABLED_PAGINATION_BUTTON_CLASS) || (D.classList.contains(w.activeButtonClass) ? (PageButtonStyle.unsetAllCSSStates(D, w, "activeButton"), Object.assign(D.style, w.activeButton.default), Object.assign(D.style, w.activeButton.hover)) : (PageButtonStyle.setDefault(D, w, O), O ? Object.assign(D.style, w.actionButtons.hover) : Object.assign(D.style, w.buttons.hover)), PaginationVisibleButtonsUtils.overrideOnMouseEvent(D, w));
}
static mouseLeave(D, w, O) {
D.classList.contains(PageButtonElement.DISABLED_PAGINATION_BUTTON_CLASS) || (D.classList.contains(w.activeButtonClass) ? (PageButtonStyle.unsetAll(D, w, !1), Object.assign(D.style, w.activeButton.default)) : PageButtonStyle.setDefault(D, w, O), PaginationVisibleButtonsUtils.overrideOnMouseEvent(D, w));
}
}
const _FilterInputElement = class Pe {
static setPlaceholder(D, w, O) {
if (w && w !== "") {
const x = O || Pe.DEFAULT_PLACEHOLDER_TEMPLATE;
D.placeholder = x.replace(Pe.TEMPLATE_VARIABLE, w);
} else
D.placeholder = Pe.DEFAULT_PLACEHOLDER;
}
static createElement(D, w, O) {
const x = document.createElement("input");
x.classList.add(Pe.INPUT_CLASS);
const U = (O == null ? void 0 : O.placeholderColor) || "#656565";
return x.style.setProperty("--active-table-filter-placeholder-color", U), Object.assign(x.style, O == null ? void 0 : O.input), Pe.setPlaceholder(x, D, w), x;
}
static create(D, w, O) {
const x = FilterInternalUtils.generateDefaultHeaderName(O, D.defaultColumnHeaderName), U = Pe.createElement(x, D.placeholderTemplate, w.styles);
return D.inputElement = U, U;
}
};
_FilterInputElement.INPUT_CLASS = "filter-rows-input";
_FilterInputElement.TEMPLATE_VARIABLE = "{headerName}";
_FilterInputElement.DEFAULT_PLACEHOLDER = "Filter";
_FilterInputElement.DEFAULT_PLACEHOLDER_TEMPLATE = `Filter ${_FilterInputElement.TEMPLATE_VARIABLE}...`;
let FilterInputElement = _FilterInputElement;
class FilterInputEvents {
static unsetEvents(D) {
D && D.forEach((w) => w.inputElement.oninput = () => {
});
}
static updateSameInputValues(D, w) {
D.forEach((O) => {
O.elements === w.elements && (O.inputElement.value = w.inputElement.value);
});
}
static getFilterData(D) {
return D.map((w) => ({
filterText: w.isCaseSensitive ? w.inputElement.value : w.inputElement.value.toLocaleLowerCase(),
colCells: w.elements.slice(1),
isCaseSensitive: w.isCaseSensitive
}));
}
static splitChunksAndExecute(D, w) {
const O = D.filter((U) => U.filterText !== "");
O.length === 0 && O.push(D[0]);
const x = Math.ceil(O[0].colCells.length / FilterInternalUtils.CHUNK_SIZE);
for (let U = 0; U < x; U += 1) {
const F = U * FilterInternalUtils.CHUNK_SIZE, W = O.map((G) => ({ ...G, chunk: G.colCells.slice(F, F + FilterInternalUtils.CHUNK_SIZE) }));
w(W);
}
}
static setEvents(D, w, O) {
if (!w.elements)
return;
const x = FilterInternalUtils.getFilterFunc(D), U = O.filter((F) => F !== w);
w.inputElement.oninput = () => {
FilterInputEvents.updateSameInputValues(U, w), FilterInputEvents.splitChunksAndExecute(FilterInputEvents.getFilterData(O), x);
};
}
}
const ARROW_DOWN_SVG_STRING = `<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-288.000000, 0.000000)">
<g transform="translate(288.000000, 0.000000)">
<path d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z" fill-rule="nonzero"></path>
<path d="M12.7071,15.7072 C12.3166,16.0977 11.6834,16.0977 11.2929,15.7072 L5.63604,10.0503 C5.24551,9.65982 5.24551,9.02666 5.63604,8.63613 C6.02656,8.24561 6.65973,8.24561 7.05025,8.63613 L12,13.5859 L16.9497,8.63613 C17.3403,8.24561 17.9734,8.24561 18.364,8.63613 C18.7545,9.02666 18.7545,9.65982 18.364,10.0503 L12.7071,15.7072 Z" fill="#09244B"></path>
</g>
</g>
</g>
</svg>`, _FilterButtonElement = class mt {
static create(D = {}) {
const w = document.createElement("div");
w.classList.add("filter-rows-dropdown-button", ToggleableElement.AUTO_STYLING_CLASS), FilterElements.applyStatefulStyles(w, mt.HOVER_STYLE, D);
const O = SVGIconUtils.createSVGElement(ARROW_DOWN_SVG_STRING);
return w.appendChild(O), w;
}
};
_FilterButtonElement.ACTIVE_STYLE = {
filter: (
// eslint-disable-next-line max-len
"brightness(0) saturate(100%) invert(14%) sepia(59%) saturate(2970%) hue-rotate(219deg) brightness(98%) contrast(126%)"
)
};
_FilterButtonElement.HOVER_STYLE = {
filter: (
// eslint-disable-next-line max-len
"brightness(0) saturate(100%) invert(31%) sepia(1%) saturate(75%) hue-rotate(327deg) brightness(100%) contrast(99%)"
)
};
let FilterButtonElement = _FilterButtonElement;
class OuterDropdownItemEvents {
// prettier-ignore
static itemMouseDownCommon(D, w, O) {
const { _activeOverlayElements: { outerContainerDropdown: x } } = this, U = O.target.innerText;
if (!x)
return;
D == null || D(this, U, O);
const F = Array.from(x.element.children);
w == null || w(this._activeOverlayElements, F), x.element.classList.contains(StaticDropdown.DROPDOWN_CLASS) || (OuterDropdownItem.unsetActiveItem(x.element), OuterDropdownItem.setActive(F, U), DropdownItemHighlightUtils.fadeCurrentlyHighlighted(this._activeOverlayElements));
}
}
class FilterDropdownItemEvents {
static resetInput(D, w, O, x) {
const U = x.target, F = U.tabIndex === -1 ? U.parentElement.tabIndex : U.tabIndex, W = w._columnsDetails[F].elements;
W !== D.elements && (D.elements = W, FilterInternalUtils.resetInput(w, D), FilterInternalUtils.unsetFilter(D.inputElement));
}
static setEvents(D, w, O, x) {
const U = FilterDropdownItemEvents.resetInput.bind(this, O), F = FilterDropdownElement.hide.bind(this, x);
w.onmousedown = OuterDropdownItemEvents.itemMouseDownCommon.bind(D, U, F);
}
}
class FilterDropdownItem {
static setActive(D, w, O) {
const x = D._columnsDetails.findIndex((U) => U.elements === O.elements);
OuterDropdownItem.setActiveByIndex(Array.from(w.children), x);
}
static addItems(D, w, O) {
var U;
const x = (U = D.data[0]) == null ? void 0 : U.map((F) => String(F));
x == null || x.forEach((F) => {
const W = { text: F }, G = DropdownItem.addButtonItem(D, w.element, W);
FilterDropdownItemEvents.setEvents(D, G, O, w.activeButtonStyle);
});
}
static populate(D, w, O) {
w.element.replaceChildren(), FilterDropdownItem.addItems(D, w, O), FilterDropdownItem.setActive(D, w.element, O);
}
}
class FilterDropdownElement {
static hide(D, w) {
OuterDropdownElement.hide(w, D);
}
// prettier-ignore
static display(D, w, O, x) {
O.data[0] && (FilterDropdownItem.populate(O, x, w), D(O, x));
}
// prettier-ignore
static create(D, w, O, x, U) {
const F = FilterButtonElement.create(U);
w.appendChild(F);
const W = (U == null ? void 0 : U.active) || {}, G = { ...FilterButtonElement.ACTIVE_STYLE, ...W }, X = FilterDropdownElement.hide.bind(this, G, D._activeOverlayElements), K = OuterDropdownButtonEvents.getDisplayFunc(O), q = FilterDropdownElement.display.bind(this, K, x), { element: Q } = OuterDropdownElement.create(
D,
F,
O,
G,
["filter-rows-dropdown"],
X,
q
);
return Q;
}
}
class StatefulCSSEvents {
static apply(D, w, O) {
ElementStyle.unsetAllCSSStates(O, D), Object.assign(O.style, w);
}
static mouseUp(D, w, O) {
w && O.classList.contains(w) || (StatefulCSSEvents.apply(D, D.default, O), Object.assign(O.style, D.hover));
}
static mouseDown(D, w, O) {
w && O.classList.contains(w) || Object.assign(O.style, D.click);
}
static mouseLeave(D, w, O) {
w && O.classList.contains(w) || StatefulCSSEvents.apply(D, D.default, O);
}
static mouseEnter(D, w, O) {
w && O.classList.contains(w) || Object.assign(O.style, D.hover);
}
// can change the styling on another element by using the otherElement argument
static getEvents(D, w, O, x) {
const U = x || D;
return {
mouseenter: StatefulCSSEvents.mouseEnter.bind(this, w, O, U),
mouseleave: StatefulCSSEvents.mouseLeave.bind(this, w, O, U),
mousedown: StatefulCSSEvents.mouseDown.bind(this, w, O, U),
mouseup: StatefulCSSEvents.mouseUp.bind(this, w, O, U)
};
}
static setEvents(D, w, O, x) {
const U = StatefulCSSEvents.getEvents(D, w, O, x);
return D.addEventListener("mouseenter", U.mouseenter), D.addEventListener("mouseleave", U.mouseleave), D.addEventListener("mousedown", U.mousedown), D.addEventListener("mouseup", U.mouseup), U;
}
}
class FilterInputCaseEvents {
static clickButton(D, w, O) {
const x = O || {}, U = ToggleableElement.toggleActive(D, { color: "#000000", ...x });
w.isCaseSensitive = !U, FilterInternalUtils.resetInput(this, w), w.inputElement.dispatchEvent(new Event("input"));
}
static setEvents(D, w, O, x) {
w.onclick = FilterInputCaseEvents.clickButton.bind(D, w, O, x);
}
}
class FilterInputCaseElement {
static createButton(D = {}) {
const w = document.createElement("div");
return w.classList.add("filter-rows-case-button"), w.textContent = "Aa", FilterElements.applyStatefulStyles(w, { color: "#626262" }, D), w;
}
static create(D, w, O, x) {
const U = FilterInputCaseElement.createButton(x == null ? void 0 : x.caseIcon);
w.appendChild(U), setTimeout(() => {
var F;
return FilterInputCaseEvents.setEvents(D, U, O, (F = x == null ? void 0 : x.caseIcon) == null ? void 0 : F.active);
});
}
}
const _FilterElements = class He {
static createContainerElement(D) {
const w = document.createElement("div");
return w.classList.add("filter-rows-container"), w.style.order = String(D || 0), w;
}
// the order at which the elements are added is very important - please check the css selectors
// prettier-ignore
static createComponent(D, w, O) {
var G;
const x = O.position || He.DEFAULT_INPUT_POSITION, U = He.createContainerElement(O.order), F = FilterInternalUtils.addConfig(D, O);
if (O.dropdown !== !1) {
const X = FilterDropdownElement.create(
D,
U,
x,
F,
(G = O.styles) == null ? void 0 : G.dropdownIcon
);
setTimeout(() => U.appendChild(X));
}
O.caseButton !== !1 && FilterInputCaseElement.create(D, U, F, O.styles);
const W = FilterInputElement.create(F, O, D.data);
U.appendChild(W), OuterContainerElements.addToContainer(x, w, U);
}
static create(D, w) {
typeof D.filter == "boolean" ? He.createComponent(D, w, {}) : Array.isArray(D.filter) ? D.filter.forEach((O) => {
He.createComponent(D, w, O);
}) : D.filter && He.createComponent(D, w, D.filter), setTimeout(() => FilterInternalUtils.resetAllInputs(D));
}
static applyStatefulStyles(D, w, O = {}) {
const x = ElementStyle.generateStatefulCSS(O, w, { color: "#484848" });
Object.assign(D.style, x.default), setTimeout(() => StatefulCSSEvents.setEvents(D, x, ToggleableElement.ACTIVE_BUTTON_CLASS));
}
};
_FilterElements.DEFAULT_INPUT_POSITION = "top-right";
let FilterElements = _FilterElements;
const CALENDAR_ICON_SVG_STRING = `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" viewBox="0 0 10 10" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 1.070312 9.285156 L 8.929688 9.285156 L 8.929688 3.570312 L 1.070312 3.570312 Z M 3.214844 2.5 L 3.214844 0.894531 C 3.214844 0.839844 3.199219 0.796875 3.164062 0.765625 C 3.128906 0.730469 3.085938 0.714844 3.035156 0.714844 L 2.679688 0.714844 C 2.625 0.714844 2.582031 0.730469 2.550781 0.765625 C 2.515625 0.796875 2.5 0.839844 2.5 0.894531 L 2.5 2.5 C 2.5 2.550781 2.515625 2.59375 2.550781 2.628906 C 2.582031 2.660156 2.625 2.679688 2.679688 2.679688 L 3.035156 2.679688 C 3.085938 2.679688 3.128906 2.660156 3.164062 2.628906 C 3.199219 2.59375 3.214844 2.550781 3.214844 2.5 Z M 7.5 2.5 L 7.5 0.894531 C 7.5 0.839844 7.484375 0.796875 7.449219 0.765625 C 7.417969 0.730469 7.375 0.714844 7.320312 0.714844 L 6.964844 0.714844 C 6.914062 0.714844 6.871094 0.730469 6.835938 0.765625 C 6.800781 0.796875 6.785156 0.839844 6.785156 0.894531 L 6.785156 2.5 C 6.785156 2.550781 6.800781 2.59375 6.835938 2.628906 C 6.871094 2.660156 6.914062 2.679688 6.964844 2.679688 L 7.320312 2.679688 C 7.375 2.679688 7.417969 2.660156 7.449219 2.628906 C 7.484375 2.59375 7.5 2.550781 7.5 2.5 Z M 9.644531 2.144531 L 9.644531 9.285156 C 9.644531 9.480469 9.570312 9.648438 9.429688 9.789062 C 9.289062 9.929688 9.121094 10 8.929688 10 L 1.070312 10 C 0.878906 10 0.710938 9.929688 0.570312 9.789062 C 0.429688 9.648438 0.355469 9.480469 0.355469 9.285156 L 0.355469 2.144531 C 0.355469 1.949219 0.429688 1.78125 0.570312 1.640625 C 0.710938 1.5 0.878906 1.429688 1.070312 1.429688 L 1.785156 1.429688 L 1.785156 0.894531 C 1.785156 0.648438 1.875 0.4375 2.046875 0.261719 C 2.222656 0.0859375 2.433594 0 2.679688 0 L 3.035156 0 C 3.28125 0 3.492188 0.0859375 3.667969 0.261719 C 3.839844 0.4375 3.929688 0.648438 3.929688 0.894531 L 3.929688 1.429688 L 6.070312 1.429688 L 6.070312 0.894531 C 6.070312 0.648438 6.160156 0.4375 6.332031 0.261719 C 6.507812 0.0859375 6.71875 0 6.964844 0 L 7.320312 0 C 7.566406 0 7.777344 0.0859375 7.953125 0.261719 C 8.125 0.4375 8.214844 0.648438 8.214844 0.894531 L 8.214844 1.429688 L 8.929688 1.429688 C 9.121094 1.429688 9.289062 1.5 9.429688 1.640625 C 9.570312 1.78125 9.644531 1.949219 9.644531 2.144531 Z M 9.644531 2.144531 "/>
</g>
</svg>`, _DateCellCalendarIconElement = class je {
// need a container as mousedown target kept being different parts of svg
// hence svgIcon has no pointer events
static createContainer() {
const D = document.createElement("div");
return D.classList.add(je.CALENDAR_ICON_CONTAINER_CLASS), D;
}
// REF-10
static createSVGElement() {
const D = SVGIconUtils.createSVGElement(CALENDAR_ICON_SVG_STRING);
return D.style.pointerEvents = "none", D.style.height = "25px", D;
}
static createSVG() {
const D = je.createSVGElement(), w = je.createContainer();
return w.appendChild(D), w;
}
static get() {
return je.CALENDAR_ICON_ELEMENT.cloneNode(!0);
}
};
_DateCellCalendarIconElement.CALENDAR_ICON_CONTAINER_CLASS = "calender-icon-container";
_DateCellCalendarIconElement.CALENDAR_ICON_ELEMENT = _DateCellCalendarIconElement.createSVG();
let DateCellCalendarIconElement = _DateCellCalendarIconElement;
class ColumnDetailsUtils {
static getColumnsByWidth(D) {
var x;
const w = [], O = [];
for (let U = 0; U < D.length; U += 1) {
const F = D[U];
((x = F.settings.widths) == null ? void 0 : x.staticWidth) !== void 0 ? O.push(F) : w.push(F);
}
return { dynamicWidth: w, staticWidth: O };
}
static aggregateItems(D) {
return D.labelDetails ? Object.keys(D.itemsDetails).map((w) => ({ name: w, backgroundColor: D.itemsDetails[w].backgroundColor })) : Object.keys(D.itemsDetails).map((w) => ({ name: w }));
}
static getDetails(D) {
const w = {
width: D.elements[0].offsetWidth,
typeName: D.activeType.name
};
return D.activeType.cellDropdownProps && (w.cellDropdownItems = ColumnDetailsUtils.aggregateItems(D.cellDropdown)), w;
}
static getAllColumnsDetails(D) {
return D.map((w) => ColumnDetailsUtils.getDetails(w));
}
}
class FireEvents {
// prettier-ignore
static onCellUpdate(D, w, O, x, U) {
const F = { text: String(w), rowIndex: O, columnIndex: x, updateType: U };
D.onCellUpdate(F), D.dispatchEvent(new CustomEvent("cell-update", { detail: F }));
}
static onDataUpdate(D) {
const w = JSON.parse(JSON.stringify(D.data));
D.onDataUpdate(w), D.dispatchEvent(new CustomEvent("data-update", { detail: w }));
}
static onColumnsUpdate(D) {
const w = ColumnDetailsUtils.getAllColumnsDetails(D._columnsDetails);
D.onColumnsUpdate(w), D.dispatchEvent(new CustomEvent("columns-update", { detail: w }));
}
static onRender(D) {
D.onRender(), D.dispatchEvent(new CustomEvent("render"));
}
}
class StaticTable {
// because we don't set the table width for maxWidth property, its width is made up of columns widths -
// they don't always add up to a precise expected value, e.g. if expected 500, they can add up to a 498
// and 499. Hence instead of doing === tableElement.offsetWidth, we do <= tableElement.offsetWidth + 2
// number 2 seems enough but can increase if this method is returning false in valid scenarios
static isTableAtMaxWidth(D, w) {
return w.maxWidth !== void 0 && w.maxWidth <= D.offsetWidth + 2;
}
static isStaticTableWidth(D, w) {
return w.width !== void 0 || StaticTable.isTableAtMaxWidth(D, w);
}
}
class StaticTableWidthUtils {
// REF-11
static togglePreserveNarrowColumns(D, w, O) {
O || (w.style.display = D ? "block" : "");
}
// when the client has not provided the 'width' value for the table, but a 'maxWidth' is present, need to
// temporarily set the width at the start in order to help the MaximumColumns class to determine what columns fit
// prettier-ignore
static toggleWidthUsingMaxWidth(D, w) {
const { _tableElementRef: O, _tableDimensions: { maxWidth: x, preserveNarrowColumns: U } } = D;
O && x !== void 0 && (O.style.width = w ? `${x}px` : "", StaticTableWidthUtils.togglePreserveNarrowColumns(w, O, U));
}
// prettier-ignore
static setTableWidth(D) {
const { _tableDimensions: { preserveNarrowColumns: w, width: O }, _tableElementRef: x } = D;
x && O !== void 0 && (x.style.width = `${O}px`, StaticTableWidthUtils.togglePreserveNarrowColumns(!0, x, w));
}
// This only runs when the table width is set
// prettier-ignore
static changeTableWidthForNonDynamicColumns(D, w, O, x, U) {
D.length === 0 || w.dynamicWidth.length > 0 ? O.offsetWidth !== x && (O.style.width = `${x}px`) : O.style.width = `${U}px`;
}
static resetDynamicWidthColumns(D, w) {
D.forEach((O) => {
O.elements[0].style.width = `${w.newColumnWidth}px`;
});
}
static setNewColumnWidth(D, w, O) {
if (w > 0) {
const x = D - O.staticWidth;
O.newColumnWidth = x / w;
}
}
static resetColumnSizes(D, w, O) {
const x = ColumnDetailsUtils.getColumnsByWidth(D);
return StaticTableWidthUtils.setNewColumnWidth(w, x.dynamicWidth.length, O), StaticTableWidthUtils.resetDynamicWidthColumns(x.dynamicWidth, O), x;
}
static changeWidthsBasedOnColumnInsertRemove(D, w) {
const { _tableElementRef: O, _tableDimensions: x, _columnsDetails: U } = D;
if (!O)
return;
const { width: F, maxWidth: W, staticWidth: G } = x;
if (F !== void 0) {
const X = StaticTableWidthUtils.resetColumnSizes(U, F, x);
StaticTableWidthUtils.changeTableWidthForNonDynamicColumns(U, X, O, F, G);
} else
w && StaticTable.isTableAtMaxWidth(O, x) && StaticTableWidthUtils.resetColumnSizes(U, W, x);
setTimeout(() => FireEvents.onColumnsUpdate(D));
}
}
class ConvertCellTypeUtils {
static preprocessCell(D) {
D.style.cursor = "";
}
}
class CellStructureUtils {
static setColumn(D, w, O, x) {
const { elements: U } = D._columnsDetails[w];
U.slice(1).forEach((F, W) => {
const G = W + 1;
O(D, F, w, G), D._columnsDetails[w].settings.isCellTextEditable && x(D, F, G, w);
});
}
}
class FocusedCellUtils {
static createEmpty() {
return {};
}
static setHeaderCell(D, w, O) {
D.element = w, D.rowIndex = 0, D.columnIndex = O;
}
static setIndexCell(D, w, O) {
D.element = w, D.rowIndex = O, delete D.columnIndex;
}
static set(D, w, O, x) {
D.element = w, D.rowIndex = O, D.columnIndex = x;
}
static incrementColumnIndex(D, w) {
D.columnIndex !== void 0 && w <= D.columnIndex && (D.columnIndex += 1);
}
static purge(D) {
delete D.columnIndex, delete D.element, delete D.rowIndex;
}
}
var KEYBOARD_KEY = /* @__PURE__ */ ((Y) => (Y.ESCAPE = "Escape", Y.ENTER = "Enter", Y.TAB = "Tab", Y.ARROW_UP = "ArrowUp", Y.ARROW_DOWN = "ArrowDown", Y.ARROW_RIGHT = "ArrowRight", Y.ARROW_LEFT = "ArrowLeft", Y))(KEYBOARD_KEY || {});
const _Browser = class {
// can't use DateCellInputElement class as this is called before CellElement class can be used
static createDateInput() {
const D = document.createElement("input");
return D.type = "date", D;
}
static createColorInput() {
const D = document.createElement("input");
return D.type = "color", D;
}
};
_Browser.IS_FIREFOX = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
_Browser.IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
_Browser.IS_CHROMIUM = window.chrome;
_Browser.IS_INPUT_DATE_SUPPORTED = _Browser.createDateInput().type === "date" && "showPicker" in HTMLInputElement.prototype;
_Browser.IS_COLOR_PICKER_SUPPORTED = _Browser.createColorInput().type === "color" && "showPicker" in HTMLInputElement.prototype;
let Browser = _Browser;
class ColumnSettingsStyleUtils {
static applySettingsStyleOnCell(D, w, O) {
var x;
Object.assign(w.style, D.cellStyle || {}, O ? ((x = D.headerStyles) == null ? void 0 : x.default) || {} : {});
}
// prettier-ignore
static setNewHeaderStyle(D, w) {
var W;
const { settings: O, elements: x } = w, U = O.cellStyle || ((W = O.headerStyles) == null ? void 0 : W.default);
U && ColumnSettingsStyleUtils.applySettingsStyleOnCell(O, x[0], !0);
const F = U ? O : void 0;
w.headerStateColors = ColumnDetails.createHeaderStateColors(
D._defaultColumnsSettings,
F,
D._defaultCellHoverColors
), ColumnSettingsBorderUtils.overwriteSideBorderIfSiblingsHaveSettings(w, [x[0]]);
}
static unsetHeaderSettingStyle(D, w) {
Object.keys(w).forEach((O) => {
ElementStyle.setStyle(D, O, "");
});
}
// prettier-ignore
static resetHeaderStyleToDefault(D, w, O) {
var F;
(F = w.headerStyles) != null && F.default && ColumnSettingsStyleUtils.unsetHeaderSettingStyle(D[0], w.headerStyles.default), w.cellStyle && ElementStyle.unsetStyle(D[0], w.cellStyle);
const { cellStyle: x, headerStyles: U } = O;
CellElement.setDefaultCellStyle(D[0], x, U == null ? void 0 : U.default);
}
// prettier-ignore
static changeHeaderStyleFunc(D, w) {
var G, X, K;
const O = this._columnsDetails[D], { elements: x, settings: { isHeaderTextEditable: U } } = O;
ColumnSettingsStyleUtils.resetHeaderStyleToDefault(x, w, this._defaultColumnsSettings), ColumnSettingsStyleUtils.setNewHeaderStyle(this, O);
const F = (K = (X = (G = this._defaultColumnsSettings.columnDropdown) == null ? void 0 : G.displaySettings) == null ? void 0 : X.openMethod) == null ? void 0 : K.cellClick, W = !F && U;
CellElement.prepContentEditable(
CellElement.getTextElement(x[0]),
!!W,
F
);
}
// prettier-ignore
static changeStyleFunc(D, w, O) {
ProcessedDataTextStyle.resetDataCellsStyle(
D,
w,
ColumnSettingsStyleUtils.changeHeaderStyleFunc.bind(D, w, O),
O.cellStyle
);
}
static doStylesHaveVisibleDimension(D, w) {
for (let O = 0; O < w.length; O += 1) {
const x = D[w[O]];
if (x) {
const U = RegexUtils.extractIntegerStrs(String(x));
if (U.length > 0 && Number(U[0]) > 0)
return !0;
}
}
return !1;
}
// REF-23
// prettier-ignore
static doesSettingHaveSideBorderStyle(D) {
var O;
const w = D.cellStyle || ((O = D.headerStyles) == null ? void 0 : O.default);
return w ? ColumnSettingsStyleUtils.doStylesHaveVisibleDimension(
w,
["border", "borderLeft", "borderLeftWidth", "borderRight", "borderRightWidth"]
) : !1;
}
}
class ResetColumnStyles {
static applyDefaultStyles(D, w) {
const { cellStyle: O, headerStyles: x } = w;
CellElement.setDefaultCellStyle(D[0], O, x == null ? void 0 : x.default), D.slice(1).forEach((U) => {
CellElement.setDefaultCellStyle(U, O);
});
}
static unsetLastAppliedStyle(D, w) {
Object.keys(D.lastAppliedStyle).forEach((O) => {
ElementStyle.setStyle(w, O, "");
});
}
// if this operation turns out to be expensive - try to save and reuse the default style
// prettier-ignore
static setDefaultStyle(D, w, O, x, U) {
ResetColumnStyles.unsetLastAppliedStyle(w, O), U && ElementStyle.unsetStyle(O, U), CellElement.setDefaultCellStyle(O, x.cellStyle), ColumnSettingsStyleUtils.applySettingsStyleOnCell(D.settings, O, !1);
}
}
const _ProcessedDataTextStyle = class Ae {
// prettier-ignore
static setCustomStyle(D, w, O, x, U, F, W) {
if (D) {
ResetColumnStyles.setDefaultStyle(O, U, F, W);
const G = D(String(w), x);
Object.assign(F.style, G), U.lastAppliedStyle = G, ColumnSettingsBorderUtils.overwriteSideBorderIfSiblingsHaveSettings(O, [F]);
}
}
// prettier-ignore
static setFailedValidationStyle(D, w, O) {
const { textValidation: x } = D.activeType, U = x.failedStyle || Ae.DEFAULT_FAILED_VALIDATION_STYLE;
Object.assign(O.style, U), w.lastAppliedStyle = U;
}
// prettier-ignore
static setStyle(D, w, O, x, U, F) {
let W = !1;
return D ? x != null && x.changeStyleFunc || (ResetColumnStyles.setDefaultStyle(w, O, U, F), O.lastAppliedStyle = {}, W = !0) : (x != null && x.changeStyleFunc && ResetColumnStyles.setDefaultStyle(w, O, U, F), Ae.setFailedValidationStyle(w, O, U), W = !0), W && ColumnSettingsBorderUtils.overwriteSideBorderIfSiblingsHaveSettings(w, [U]), W;
}
// prettier-ignore
static setCellStyle(D, w, O, x = !1) {
const U = D._columnsDetails[O], F = U.elements[w], W = U.processedStyle[w], G = CellElement.getText(F), { textValidation: { func: X }, customTextProcessing: K } = U.activeType;
let q = !1;
if (X) {
const Q = X(G);
(x || W.isValid !== Q) && (q = Ae.setStyle(
Q,
U,
W,
K,
F,
D._defaultColumnsSettings
), W.isValid = Q);
}
!q && (K != null && K.changeStyleFunc) && Ae.setCustomStyle(
K.changeStyleFunc,
G,
U,
w,
W,
F,
D._defaultColumnsSettings
);
}
static setStyleOnColumn(D, w) {
const O = D._columnsDetails[w];
O.elements.slice(1).forEach((x, U) => {
const F = U + 1;
Ae.setCellStyle(D, F, w, !0), ColumnSettingsBorderUtils.overwriteSideBorderIfSiblingsHaveSettings(O, [x]);
});
}
static unsetStyleOnColumn(D, w, O) {
const x = D._columnsDetails[w];
x.elements.slice(1).forEach((U, F) => {
const W = F + 1, G = x.processedStyle[W];
ResetColumnStyles.setDefaultStyle(x, G, U, D._defaultColumnsSettings, O);
});
}
// using this to first unset the previous processed style, allow new settings/type to be applied and then set
// new style
// prettier-ignore
static resetDataCellsStyle(D, w, O, x) {
Ae.unsetStyleOnColumn(D, w, x), O(), Ae.setStyleOnColumn(D, w);
}
// prettier-ignore
// this is used for a case where the default style has been set and need to reapply the processed style
// without having to rerun the validation/changeStyleFunc functions
static reapplyCellsStyle(D, w) {
const O = D._columnsDetails[w], { textValidation: { func: x }, customTextProcessing: U } = O.activeType;
(x || U != null && U.changeStyleFunc) && O.elements.slice(1).forEach((F, W) => {
const G = W + 1;
Object.assign(F.style, O.processedStyle[G].lastAppliedStyle);
});
}
static getDefaultProcessedTextStyle() {
return { isValid: !0, lastAppliedStyle: {} };
}
};
_ProcessedDataTextStyle.DEFAULT_FAILED_VALIDATION_STYLE = { color: "grey" };
let ProcessedDataTextStyle = _ProcessedDataTextStyle;
class NumberOfIdenticalCells {
// columnsDetails instead of row from data because during startup - data is already be populated and
// not yet added to the table, hence we are automatically marking headers as duplicate and setting them
// to default, however the end headers that are not duplicate may not be displayed due to max columns,
// hence using columnsDetails to mark duplicates as headers are added instead
// prettier-ignore
static get(D, w) {
return w.map((O) => O.elements.length > 0 ? CellElement.getText(O.elements[0]) : "").filter((O) => O === D).length;
}
}
const EMPTY_STRING = "";
class DataUtils {
static createEmptyStringDataArray(D) {
return new Array(D).fill(EMPTY_STRING);
}
static isTextEmpty(D, w) {
return D !== EMPTY_STRING ? (typeof w == "string" ? w.trim() : w) === EMPTY_STRING : !1;
}
// note that NumberOfIdenticalCells.get uses the at.data top row, so it needs to be up-to-date
// prettier-ignore
static shouldBeSetToDefault(D, w, O, x, U) {
const { allowDuplicateHeaders: F, _columnsDetails: W } = D;
return DataUtils.isTextEmpty(O, w) || x === 0 && !F && NumberOfIdenticalCells.get(w, W) > 1 || x > 0 && !(U.func === void 0 || U.func(String(w)));
}
// prettier-ignore
static processCellText(D, w, O, x) {
let U = typeof x == "string" ? x.trim() : x;
const F = D._columnsDetails[O];
if (!F)
return U;
const { activeType: { textValidation: W, customTextProcessing: G }, settings: { defaultText: X } } = F;
return w > 0 && (G != null && G.changeTextFunc && (U = G.changeTextFunc(String(U), w)), !W.setTextToDefaultOnFail && U !== EMPTY_STRING) ? U : DataUtils.shouldBeSetToDefault(D, U, X, w, W) ? X : U;
}
}
var CELL_UPDATE_TYPE = /* @__PURE__ */ ((Y) => (Y.UPDATE = "Update", Y.ADD = "Add", Y.REMOVED = "Removed", Y))(CELL_UPDATE_TYPE || {});
class CellEvents {
static executeUpdateOperation(D, w) {
return (w == null ? void 0 : w[D]) === void 0 || w[D] === !0;
}
// this is directly handled by operations that do not insert new cells as those handle the instructions below
// in a different order asynchronously for maximum efficiency
// prettier-ignore
static updateCell(D, w, O, x, U) {
return CellEvents.executeUpdateOperation("processText", U) && (w = DataUtils.processCellText(D, O, x, w)), CellEvents.executeUpdateOperation("updateData", U) && (D.data[O][x] = w), U != null && U.element && CellElement.setNewText(D, U.element, w, !1, !1), CellEvents.executeUpdateOperation("updateTableEvent", U) && D.onDataUpdate(D.data), O > 0 && ProcessedDataTextStyle.setCellStyle(D, O, x), CellEvents.executeUpdateOperation("updateCellEvent", U) && FireEvents.onCellUpdate(D, w, O, x, CELL_UPDATE_TYPE.UPDATE), w;
}
// this is used for cases where updateCell should only be called if it has to be set to default
// prettier-ignore
static setCellToDefaultIfNeeded(D, w, O, x, U = !0) {
const F = CellElement.getText(x), W = DataUtils.processCellText(D, w, O, F);
return W !== F ? (CellEvents.updateCell(
D,
W,
w,
O,
{ element: x, processText: !1, updateTableEvent: U }
), !0) : !1;
}
// prettier-ignore
static removeTextIfDefault(D, w, O, x) {
const { isDefaultTextRemovable: U, defaultText: F } = D._columnsDetails[O].settings;
U && F !== EMPTY_STRING && F === CellElement.getText(x) && CellEvents.updateCell(
D,
EMPTY_STRING,
w,
O,
{ element: x, processText: !1 }
);
}
}
class CheckboxEvents {
// REF-29
static focusCheckbox(D, w, O) {
Browser.IS_SAFARI || FocusedCellUtils.set(this._focusedElements.cell, D, w, O);
}
// REF-29
static blurCheckbox() {
Browser.IS_SAFARI || FocusedCellUtils.purge(this._focusedElements.cell);
}
static changeValueCheckbox(D, w, O) {
const x = O.target;
CellEvents.updateCell(this, String(x.checked), D, w, { processText: !1 });
}
static keyDownCheckbox(D) {
D.key === KEYBOARD_KEY.ENTER && D.target.click();
}
static setEvents(D, w, O, x) {
w.onkeydown = CheckboxEvents.keyDownCheckbox, w.onchange = CheckboxEvents.changeValueCheckbox.bind(D, O, x), w.onfocus = CheckboxEvents.focusCheckbox.bind(D, w, O, x), w.onblur = CheckboxEvents.blurCheckbox.bind(D);
}
}
class CheckboxCellEvents {
static mouseDownCell(D) {
const w = D.target;
w.classList.contains(CellElement.CELL_CLASS) && w.children[0].click();
}
// REF-29
static focusCell(D) {
D.target.children[0].focus();
}
static setEvents(D, w, O, x) {
if (!D._columnsDetails[x].settings.isCellTextEditable)
return;
w.onblur = () => {
}, w.onfocus = CheckboxCellEvents.focusCell, w.onmouseenter = () => {
}, w.onmouseleave = () => {
}, w.oninput = () => {
}, w.onmousedown = CheckboxCellEvents.mouseDownCell.bind(D);
const U = CheckboxCellElement.getCheckboxElement(w);
CheckboxEvents.setEvents(D, U, O, x);
}
}
class CheckboxElement {
static createCheckbox(D) {
const w = document.createElement("input");
return w.type = "checkbox", w.style.cursor = D ? "pointer" : "auto", w.style.pointerEvents = D ? "" : "none", w;
}
static setCellTextAsCheckbox(D, w) {
const O = CheckboxElement.createCheckbox(w);
D.replaceChildren(O);
}
}
class CheckboxCellElement {
static isCheckbox(D) {
return (D == null ? void 0 : D.type) === "checkbox";
}
static isCheckboxCell(D) {
return CheckboxCellElement.isCheckbox(D.children[0]);
}
static getCheckboxElement(D) {
if (CheckboxCellElement.isCheckboxCell(D))
return D.children[0];
if (CheckboxCellElement.isCheckbox(D))
return D;
}
static getValue(D) {
const w = CheckboxCellElement.getCheckboxElement(D);
if (w)
retu