slick-table 0.0.15 → 0.0.16

package/src/shared/lib/dom/elementNotVisible.spec.ts

@@ -0,0 +1,72 @@
+import { elementNotVisible } from "./elementNotVisible";
+
+describe("elementNotVisible", () => {
+	let getBoundingClientRect: jest.Mock;
+	let originalScrollHeight: number;
+	let originalScrollWidth: number;
+
+	beforeAll(() => {
+		originalScrollHeight = document.documentElement.scrollHeight;
+		originalScrollWidth = document.documentElement.scrollWidth;
+		Object.defineProperty(document.documentElement, "scrollHeight", {
+			value: 1000,
+			writable: true,
+		});
+		Object.defineProperty(document.documentElement, "scrollWidth", {
+			value: 1000,
+			writable: true,
+		});
+		getBoundingClientRect = jest.fn();
+		document.querySelector = jest.fn();
+	});
+
+	afterAll(() => {
+		Object.defineProperty(document.documentElement, "scrollHeight", {
+			value: originalScrollHeight,
+			writable: true,
+		});
+		Object.defineProperty(document.documentElement, "scrollWidth", {
+			value: originalScrollWidth,
+			writable: true,
+		});
+		jest.clearAllMocks();
+	});
+
+	it("should return true if the container is not found", () => {
+		(document.querySelector as jest.Mock).mockReturnValue(null);
+		expect(elementNotVisible(".nonexistent")).toBe(true);
+	});
+
+	it("should return true if the container is out of view", () => {
+		(document.querySelector as jest.Mock).mockReturnValue({
+			getBoundingClientRect,
+		});
+		getBoundingClientRect.mockReturnValue({
+			bottom: -1,
+			left: 0,
+			right: 0,
+			top: 0,
+		});
+		expect(elementNotVisible(".out-of-view")).toBe(true);
+		getBoundingClientRect.mockReturnValue({
+			bottom: 0,
+			left: 1001,
+			right: 1002,
+			top: 0,
+		});
+		expect(elementNotVisible(".out-of-view")).toBe(true);
+	});
+
+	it("should return false if the container is within view", () => {
+		(document.querySelector as jest.Mock).mockReturnValue({
+			getBoundingClientRect,
+		});
+		getBoundingClientRect.mockReturnValue({
+			bottom: 500,
+			left: 100,
+			right: 200,
+			top: 100,
+		});
+		expect(elementNotVisible(".in-view")).toBe(false);
+	});
+});

package/src/shared/lib/dom/elementNotVisible.ts

@@ -0,0 +1,9 @@
+export function elementNotVisible(selector: string): boolean {
+	const container = document.querySelector(selector);
+	if (!container) return true;
+	const { scrollHeight, scrollWidth } = document.documentElement;
+	const { bottom, left, right, top } = container.getBoundingClientRect();
+	return (
+		bottom <= 0 || left >= scrollWidth || right <= 0 || top >= scrollHeight
+	);
+}

package/src/shared/lib/dom/index.ts

@@ -0,0 +1 @@
+export { elementNotVisible } from "./elementNotVisible";

package/src/shared/lib/format/IOptions.ts

@@ -0,0 +1,11 @@
+export interface IOptions {
+	decimalPlaces?: number;
+	decimalSeparator?: string;
+	thousandsSeparator?: string;
+	negativeInParentheses?: boolean;
+	zeroAsBlank?: boolean;
+	currencySymbol?: string;
+	positiveClass?: string;
+	negativeClass?: string;
+	noHTML?: boolean;
+}

package/src/shared/lib/format/addParentheses.spec.ts

@@ -0,0 +1,9 @@
+import { addParentheses } from "./addParentheses";
+
+describe("addParentheses", () => {
+	test("must add parentheses", () => {
+		expect(addParentheses("-5")).toBe("(5)");
+		expect(addParentheses("-5.125")).toBe("(5.125)");
+		expect(addParentheses("5")).toBe("(5)");
+	});
+});

package/src/shared/lib/format/addParentheses.ts

@@ -0,0 +1,7 @@
+export function addParentheses(value: string): string {
+	return `(${removeMinus(value)})`;
+}
+
+function removeMinus(value: string): string {
+	return value.replace("-", "");
+}

package/src/shared/lib/format/formatNumber.spec.ts

@@ -0,0 +1,50 @@
+import { formatNumber } from "./formatNumber";
+
+describe("formatMoney", () => {
+	test("must return empty string", () => {
+		expect(formatNumber(0, { zeroAsBlank: true })).toBe("");
+		expect(formatNumber("0", { zeroAsBlank: true })).toBe("");
+		expect(formatNumber(null)).toBe("");
+		expect(formatNumber(undefined)).toBe("");
+		expect(formatNumber("")).toBe("");
+	});
+	test("must return zero", () => {
+		expect(formatNumber(0)).toBe("0.00");
+		expect(formatNumber("0", { decimalSeparator: "," })).toBe("0,00");
+	});
+	test("must return correct values", () => {
+		expect(formatNumber(0.1)).toBe("0.10");
+		expect(formatNumber(1000222.1, { decimalPlaces: 4 })).toBe(
+			"1,000,222.1000",
+		);
+		expect(formatNumber(-1000222.1, { currencySymbol: "$" })).toBe(
+			"($1,000,222.10)",
+		);
+		expect(
+			formatNumber(-1000222.1, {
+				decimalSeparator: ",",
+				decimalPlaces: 3,
+				thousandsSeparator: ".",
+				currencySymbol: "$",
+			}),
+		).toBe("($1.000.222,100)");
+		expect(formatNumber("1500.02")).toBe("1,500.02");
+		expect(formatNumber("1700500.02")).toBe("1,700,500.02");
+		expect(formatNumber("-1700500.02")).toBe("(1,700,500.02)");
+	});
+	test("must return add class name", () => {
+		expect(
+			formatNumber(5, { negativeClass: "neg", positiveClass: "pos" }),
+		).toBe('<span class="pos">5.00</span>');
+		expect(
+			formatNumber(-5, { negativeClass: "neg", positiveClass: "pos" }),
+		).toBe('<span class="neg">(5.00)</span>');
+		expect(
+			formatNumber(-5, {
+				negativeClass: "neg",
+				noHTML: true,
+				positiveClass: "pos",
+			}),
+		).toBe("(5.00)");
+	});
+});

package/src/shared/lib/format/formatNumber.ts

@@ -0,0 +1,62 @@
+import { IOptions } from "./IOptions";
+import { addParentheses } from "./addParentheses";
+
+/**
+ * @param {(number | null | undefined)} value Money amount to be formatted.
+ * @param {Object} [options] Formatting options.
+ * @param {boolean} [options.currencySymbol = ""] Currency symbol.
+ * @param {number} [options.decimalPlaces = 2] Number of decimal places.
+ * @param {string} [options.decimalSeparator = "."] Decimal separator.
+ * @param {boolean} options.negativeClass Style class name for negative numbers.
+ * @param {boolean} [options.negativeInParentheses = true] Enclose negative numbers in parentheses.
+ * @param {boolean} [options.noHTML = false] Return plain text without HTML.
+ * @param {boolean} options.positiveClass Style class name for positive numbers.
+ * @param {string} [options.thousandsSeparator = ","] Thousands separator.
+ * @param {boolean} [options.zeroAsBlank = false] Display zero as en empty string.
+ * */
+export function formatNumber(
+	value: number | string | null | undefined,
+	options: IOptions = {},
+): string {
+	const {
+		currencySymbol = "",
+		decimalPlaces = 2,
+		decimalSeparator = ".",
+		negativeClass,
+		negativeInParentheses = true,
+		noHTML = false,
+		positiveClass,
+		thousandsSeparator = ",",
+		zeroAsBlank = false,
+	} = options;
+	if (value === undefined || value === null || value === "") {
+		return "";
+	} else if (!Number(value) && zeroAsBlank) return "";
+	const isNegative = (Number(value) || 0) < 0;
+	const valueFixed = Math.abs(Number(value) || 0).toFixed(decimalPlaces);
+	const integerPart = parseInt(valueFixed).toString();
+	const remainder = integerPart.length > 3 ? integerPart.length % 3 : 0;
+	const withThousandsSeparator =
+		(remainder ? integerPart.slice(0, remainder) + thousandsSeparator : "") +
+		integerPart
+			.slice(remainder)
+			.replace(/(\d{3})(?=\d)/g, `$1${thousandsSeparator}`);
+	const withDecimalPlaces =
+		withThousandsSeparator +
+		(decimalPlaces ? decimalSeparator + valueFixed.slice(-decimalPlaces) : "");
+	const withCurrency = `${currencySymbol}${withDecimalPlaces}`;
+	const withMinus = isNegative ? `-${withCurrency}` : withCurrency;
+	const withParentheses =
+		isNegative && negativeInParentheses ? addParentheses(withMinus) : withMinus;
+	if (noHTML) {
+		return withParentheses;
+	} else if (isNegative) {
+		return negativeClass
+			? `<span class="${negativeClass}">${withParentheses}</span>`
+			: withParentheses;
+	} else {
+		return positiveClass
+			? `<span class="${positiveClass}">${withParentheses}</span>`
+			: withParentheses;
+	}
+}

package/src/shared/lib/format/index.ts

@@ -0,0 +1,2 @@
+export { formatNumber } from "./formatNumber";
+export type { IOptions } from "./IOptions";

package/src/shared/lib/numbers/index.ts

@@ -0,0 +1 @@
+export { toNumber } from "./toNumber";

package/src/shared/lib/numbers/toNumber.spec.ts

@@ -0,0 +1,25 @@
+import { toNumber } from "./toNumber";
+
+test("Return expected values", () => {
+	expect(toNumber()).toBe(0);
+	expect(toNumber(null)).toBe(0);
+	expect(toNumber(NaN)).toBe(0);
+	expect(toNumber("")).toBe(0);
+	expect(toNumber(0)).toBe(0);
+	expect(toNumber("0")).toBe(0);
+	expect(toNumber("0.00")).toBe(0);
+	expect(toNumber("0a")).toBe(0);
+	expect(toNumber(50)).toBe(50);
+	expect(toNumber(-50.035)).toBe(-50.035);
+	expect(toNumber("$50.035")).toBe(50.035);
+	expect(toNumber("-50.035")).toBe(-50.035);
+	expect(toNumber("-$50.035")).toBe(-50.035);
+	expect(toNumber("($50.035)")).toBe(-50.035);
+	expect(toNumber("103613.10")).toBe(103613.1);
+	expect(toNumber("-103613.10")).toBe(-103613.1);
+	expect(toNumber("50")).toBe(50);
+	expect(toNumber("50,000,000.00")).toBe(50000000);
+	expect(toNumber("50,000,000.12345")).toBe(50000000.12345);
+	expect(toNumber("-sdf,ffg,g,h,,hfg,")).toBe(0);
+	expect(toNumber(".")).toBe(0);
+});

package/src/shared/lib/numbers/toNumber.ts

@@ -0,0 +1,11 @@
+export const toNumber = (value?: string | number | null): number => {
+	if (!value) return 0;
+	if (typeof value === "number") return value;
+	const stringWithoutCommas = value.replace(/\$|,|\s/g, "");
+	const absValueString = stringWithoutCommas.replace(/\(|\)/g, "");
+	if (isNaN(Number(absValueString))) return 0;
+	return stringWithoutCommas.startsWith("(") &&
+		stringWithoutCommas.endsWith(")")
+		? 0 - Number(absValueString)
+		: Number(stringWithoutCommas);
+};

package/src/shared/lib/regexp/dates.spec.ts

@@ -0,0 +1,23 @@
+import { Dates } from "./dates";
+
+describe("Dates regexps", () => {
+	it("MMDDYYYY", () => {
+		expect(Dates.MMDDYYYY.test("01/05/2024")).toBeTruthy();
+		expect(Dates.MMDDYYYY.test("01/05/24")).toBeFalsy();
+	});
+
+	it("MMDDYY", () => {
+		expect(Dates.MMDDYY.test("01/05/24")).toBeTruthy();
+		expect(Dates.MMDDYY.test("01/05/2024")).toBeFalsy();
+	});
+
+	it("MDY", () => {
+		expect(Dates.MDY.test("01/05/24")).toBeTruthy();
+		expect(Dates.MDY.test("01/05/2024")).toBeTruthy();
+	});
+
+	it("MD", () => {
+		expect(Dates.MD.test("01/24")).toBeTruthy();
+		expect(Dates.MD.test("1/4")).toBeTruthy();
+	});
+});

package/src/shared/lib/regexp/dates.ts

@@ -0,0 +1,6 @@
+export const Dates = {
+	MMDDYYYY: new RegExp(/^\d{2}\/\d{2}\/(\d{4})$/),
+	MMDDYY: new RegExp(/^\d{2}\/\d{2}\/(\d{2})$/),
+	MDY: new RegExp(/^\d{1,2}\/\d{1,2}\/(\d{2}|\d{4})$/),
+	MD: new RegExp(/^\d{1,2}\/\d{1,2}$/),
+};

package/src/shared/lib/regexp/escapeSpecialChar.spec.ts

@@ -0,0 +1,24 @@
+import { escapeSpecialChar } from "./escapeSpecialChar";
+
+describe("Escape special characters", () => {
+	test("handles an empty string", () => {
+		const input = "";
+		const expectedOutput = "";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+	test("returns the same string if no special characters are present", () => {
+		const input = "HelloWorld";
+		const expectedOutput = "HelloWorld";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+	test("escapes special characters in a string", () => {
+		const input = "Hello. How are you?";
+		const expectedOutput = "Hello\\. How are you\\?";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+	test("handles strings with only special characters", () => {
+		const input = ".*+?^${}()|[]\\";
+		const expectedOutput = "\\.\\*\\+\\?\\^\\$\\{\\}\\(\\)\\|\\[\\]\\\\";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+});

package/src/shared/lib/regexp/escapeSpecialChar.ts

@@ -0,0 +1,4 @@
+/** @description Escapes special characters in string before using it in RegExp */
+export function escapeSpecialChar(value: string): string {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
+}

package/src/shared/lib/regexp/index.ts

@@ -0,0 +1,2 @@
+export { Dates } from "./dates";
+export { escapeSpecialChar } from "./escapeSpecialChar";

package/src/shared/lib/slickgrid/index.ts

@@ -0,0 +1,68 @@
+export {
+	Autocomplete,
+	ColumnSorter,
+	DateFormatter,
+	DateValidator,
+	EditorAmount,
+	EditorAutocomplete,
+	EditorDate,
+	EditorSelectString,
+	EditorSelectNumber,
+	EditorSelectWithSearch,
+	EmptyStringValidator,
+	FORMATTER_NUMBER,
+	FormatterCheck,
+	getFormatterNumber,
+	LengthValidator,
+	PercentFormatter,
+	FormatterCheckPrinter,
+	StringFormatter,
+	columnSorter,
+	commitCurrentEdit,
+	deleteRows,
+	getDisplayedRows,
+	getLastRow,
+	getMaxId,
+	highlightCell,
+	highlightColumns,
+	isDeletionDangerous,
+	onCellChange,
+	onRowCountChanged,
+	onRowsChanged,
+	selectedRows,
+	sumTotalsFormatter,
+	totalAmountOf,
+	updateTotals,
+	useHotKeys,
+	getUpdates,
+	useListenIfTablesWereEdited,
+	useUpdateTotal,
+	wereEdited,
+} from "./lib";
+export {
+	DownloadManager,
+	DecoratorEndingDate,
+	DecoratorFilter,
+	DecoratorColumnFilter,
+	DecoratorPeriod,
+	DefaultHotKeys,
+	DefaultPrinter,
+	DeletedRowsFilter,
+	Filter,
+	PreventCopying,
+	RedoUndoOnly,
+	SlickTable,
+	WithConfirmationOfDeletion,
+	WithoutHotKeys,
+	eventContextMenu,
+} from "./model";
+export {
+	SlickgridTable,
+	WithTableStyles,
+	columnCheckboxSelector,
+	columnIsEdited,
+	eventOpenColumnFilters,
+	handleHeaderButtons,
+	headerButtons,
+	openColumnFilter,
+} from "./ui";

package/src/shared/lib/slickgrid/lib/callbacks/getOnKeyDownCallback.ts

@@ -0,0 +1,12 @@
+import { Handler, OnKeyDownEventArgs, SlickGrid } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export const getOnKeyDownCallback =
+	(grid: SlickGrid): Handler<OnKeyDownEventArgs> =>
+	(event): void => {
+		if (event.keyCode === EKeyCode.KeyEnter) {
+			event.stopImmediatePropagation();
+			grid.navigateNext();
+		}
+	};

package/src/shared/lib/slickgrid/lib/callbacks/index.ts

@@ -0,0 +1,4 @@
+export { getOnKeyDownCallback } from "./getOnKeyDownCallback";
+export { onCellChange } from "./onCellChange";
+export { onRowsChanged } from "./onRowsChanged";
+export { onRowCountChanged } from "./onRowCountChanged";

package/src/shared/lib/slickgrid/lib/callbacks/onCellChange.ts

@@ -0,0 +1,14 @@
+import { Handler, OnCellChangeEventArgs, SlickDataView } from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+export const onCellChange =
+	(table: ISlickTable): Handler<OnCellChangeEventArgs> =>
+	(_e, args) => {
+		const { grid, item } = args;
+		item.isEdited = true;
+		const dataView: SlickDataView = grid.getData();
+		dataView.updateItem(item.id, item);
+		table.isEdited = true;
+		table.hotKeysBehavior.pushToCommandQueue(grid);
+	};

package/src/shared/lib/slickgrid/lib/callbacks/onRowCountChanged.ts

@@ -0,0 +1,12 @@
+import { Handler, OnRowCountChangedEventArgs } from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+export const onRowCountChanged =
+	(table: ISlickTable): Handler<OnRowCountChangedEventArgs> =>
+	() => {
+		const grid = table.grid;
+		if (!grid) return;
+		grid.updateRowCount();
+		grid.render();
+	};

package/src/shared/lib/slickgrid/lib/callbacks/onRowsChanged.ts

@@ -0,0 +1,8 @@
+import { Handler, OnRowsChangedEventArgs, SlickGrid } from "slickgrid";
+
+export const onRowsChanged =
+	(grid: SlickGrid): Handler<OnRowsChangedEventArgs> =>
+	(_e, args): void => {
+		grid.invalidateRows(args.rows);
+		grid.render();
+	};

package/src/shared/lib/slickgrid/lib/contextMenu/index.ts

@@ -0,0 +1 @@
+export { openContextMenu } from "./openContextMenu";

package/src/shared/lib/slickgrid/lib/contextMenu/openContextMenu.ts

@@ -0,0 +1,17 @@
+import { MenuCommandItemCallbackArgs, SlickEventData } from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+import { eventContextMenu } from "../../model";
+import { commitCurrentEdit } from "../functions";
+
+export function openContextMenu(table: ISlickTable) {
+	return function (e: SlickEventData<MenuCommandItemCallbackArgs>): void {
+		e.preventDefault();
+		commitCurrentEdit();
+		eventContextMenu.table = table;
+		eventContextMenu.x = e.pageX || 0;
+		eventContextMenu.y = e.pageY || 0;
+		eventContextMenu.notify();
+	};
+}

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts

@@ -0,0 +1,152 @@
+import {
+	Editor,
+	EditorArguments,
+	EditorValidationResult,
+	keyCode,
+} from "slickgrid";
+
+import { EKey } from "shared/model/enums";
+import { ISlickRow } from "shared/model/types";
+
+export abstract class Autocomplete implements Editor {
+	abstract args: EditorArguments<any, any, any>;
+	protected currentFocus = -1;
+	protected defaultValue = "";
+	protected id = "autocomplete";
+	protected input: HTMLInputElement = document.createElement("input");
+	public keyCaptureList: number[] = [keyCode.UP, keyCode.DOWN, keyCode.ENTER];
+	protected list?: HTMLDivElement;
+	protected navOnLR?: boolean;
+
+	applyValue(item: any, state: any): void {
+		item[this.args.column.field] = state;
+	}
+	closeAllList(): void {
+		this.list?.remove();
+		this.list = undefined;
+		this.currentFocus = -1;
+	}
+	destroy(): void {
+		this.input.removeEventListener("input", this.onInput.bind(this));
+		this.input.removeEventListener("keydown", this.onKeydown.bind(this));
+		this.closeAllList();
+		this.input.remove();
+	}
+	focus(): void {
+		this.input.focus();
+	}
+	init(): void {
+		this.navOnLR = this.args.grid.getOptions().editorCellNavOnLRKeys;
+		this.input.setAttribute("type", "text");
+		this.input.classList.add("editor-text");
+		this.args.container.append(this.input);
+
+		this.input.addEventListener("input", this.onInput.bind(this));
+		this.input.addEventListener("keydown", this.onKeydown.bind(this));
+		this.input.focus();
+		this.input.select();
+	}
+	isValueChanged(): boolean {
+		return (
+			!(this.input.value == "" && this.defaultValue == null) &&
+			this.input.value != this.defaultValue
+		);
+	}
+	loadValue(item: ISlickRow): void {
+		this.defaultValue = item[this.args.column.field] || "";
+		this.input.value = this.defaultValue;
+		this.input.defaultValue = this.defaultValue;
+		this.input.focus();
+		this.input.select();
+	}
+	makeVisible(list: HTMLDivElement): void {
+		const canvas = list.closest(".grid-canvas");
+		if (!canvas) return;
+		const { bottom: listBottom, right: listRigth } =
+			list.getBoundingClientRect();
+		const { bottom: canvasBottom, right: canvasRight } =
+			canvas.getBoundingClientRect();
+		if (listBottom >= canvasBottom) {
+			const rowHeight = this.args.grid.getOptions().rowHeight;
+			list.style.position = "absolute";
+			list.style.bottom = `${rowHeight}px`;
+		}
+		if (listRigth >= canvasRight) {
+			list.style.position = "absolute";
+			list.style.right = "0";
+		}
+	}
+	abstract onClick(event: MouseEvent): void;
+	abstract onInput(event: Event): void;
+	onKeydown(event: KeyboardEvent): void {
+		if (event.key === EKey.ArrowLeft) {
+			this.navOnLR && this.args.grid.navigatePrev();
+			event.stopImmediatePropagation();
+			return;
+		} else if (event.key === EKey.ArrowRight) {
+			this.navOnLR && this.args.grid.navigateNext();
+			event.stopImmediatePropagation();
+			return;
+		}
+		if (!this.list) return;
+		const items: HTMLCollectionOf<HTMLDivElement> =
+			this.list.getElementsByTagName("div");
+		if (event.key === EKey.ArrowDown) {
+			this.currentFocus++;
+			this.setActive(items);
+		} else if (event.key === EKey.ArrowUp) {
+			this.currentFocus--;
+			this.setActive(items);
+		} else if (event.key === EKey.Enter) {
+			event.preventDefault();
+			if (this.currentFocus > -1) {
+				/* simulate a click on the "active" item */
+				if (items) items[this.currentFocus].click();
+			}
+		}
+	}
+	removeActive(x: HTMLCollectionOf<HTMLDivElement>): void {
+		for (let i = 0; i < x.length; i++) {
+			x[i].classList.remove("active");
+		}
+	}
+	scrollToElement(child: HTMLDivElement): void {
+		const parent = child.parentElement;
+		if (!parent) return;
+		const { clientHeight: childClientHeight, offsetTop } = child;
+		const { clientHeight: parentClientHeight, scrollTop } = parent;
+		if (offsetTop >= scrollTop + parentClientHeight) {
+			parent.scrollTop = offsetTop - childClientHeight * 1.5;
+		} else if (offsetTop - childClientHeight <= scrollTop) {
+			parent.scrollTop = offsetTop - parentClientHeight;
+		}
+	}
+	serializeValue(): string {
+		return this.input.value;
+	}
+	setActive(list: HTMLCollectionOf<HTMLDivElement>): void {
+		if (!list.length) return;
+		this.removeActive(list);
+		if (this.currentFocus >= list.length) this.currentFocus = 0;
+		if (this.currentFocus < 0) this.currentFocus = list.length - 1;
+		const activeElement = list[this.currentFocus];
+		activeElement.classList.add("active");
+		this.scrollToElement(activeElement);
+	}
+	abstract showOptions(search: string): void;
+	validate(): EditorValidationResult {
+		if (this.args.column.validator) {
+			const validationResults = this.args.column.validator(
+				this.input.value,
+				this.args,
+			);
+			if (!validationResults.valid) {
+				return validationResults;
+			}
+		}
+		return {
+			valid: true,
+			msg: null,
+		};
+	}
+}