@keenthemes/ktui 1.2.1 → 1.2.3

package/src/components/carousel/index.ts

@@ -0,0 +1,11 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+export { KTCarousel } from './carousel';
+export type {
+	KTCarouselChangePayloadInterface,
+	KTCarouselConfigInterface,
+	KTCarouselInterface,
+} from './types';

package/src/components/carousel/types.ts

@@ -0,0 +1,38 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+export interface KTCarouselConfigInterface {
+	autoplay: boolean;
+	autoplayInterval: number;
+	infiniteLoop: boolean;
+	rtl: boolean;
+	perView: number;
+	centered: boolean;
+	draggable: boolean;
+	snap: boolean;
+	autoHeight: boolean;
+	/** When true, native scrollbars stay visible on the viewport and thumbnail strip. */
+	showScrollbar: boolean;
+	lazy: boolean;
+	pauseOnHover: boolean;
+	changeEvent: string;
+}
+
+export interface KTCarouselChangePayloadInterface {
+	index: number;
+	prevIndex: number;
+	userInitiated: boolean;
+}
+
+export interface KTCarouselInterface {
+	goTo(index: number, userInitiated?: boolean): void;
+	next(userInitiated?: boolean): void;
+	prev(userInitiated?: boolean): void;
+	getIndex(): number;
+	getSlideCount(): number;
+	dispose(): void;
+	getElement(): HTMLElement;
+	getOption(name: string): unknown;
+}

package/src/components/clipboard/__tests__/clipboard.test.ts

@@ -80,7 +80,7 @@ function createFixture(options?: {
 }
 
 describe('KTClipboard', () => {
-	let originalExecCommand: any;
+	let originalExecCommand: Document['execCommand'];
 
 	beforeEach(() => {
 		// Ensure a clean clipboard state between tests.
@@ -90,7 +90,7 @@ describe('KTClipboard', () => {
 	afterEach(() => {
 		document.body.innerHTML = '';
 		// Restore execCommand (if it was replaced).
-		document.execCommand = originalExecCommand as any;
+		document.execCommand = originalExecCommand;
 	});
 
 	it('copies predefined text (text wins over target)', async () => {
@@ -135,7 +135,7 @@ describe('KTClipboard', () => {
 		});
 
 		const execCommandMock = vi.fn().mockReturnValue(true);
-		document.execCommand = execCommandMock as any;
+		document.execCommand = execCommandMock as Document['execCommand'];
 
 		const { trigger } = createFixture({
 			withPredefinedText: true,
@@ -163,7 +163,7 @@ describe('KTClipboard', () => {
 		});
 
 		const execCommandMock = vi.fn().mockReturnValue(false);
-		document.execCommand = execCommandMock as any;
+		document.execCommand = execCommandMock as Document['execCommand'];
 
 		const { trigger } = createFixture({
 			withPredefinedText: true,

package/src/components/component.ts

@@ -19,7 +19,7 @@ export default class KTComponent {
 	protected _name: string;
 	protected _defaultConfig: object;
 	protected _config: object;
-	protected _events: Map<string, Map<string, CallableFunction>>;
+	protected _events: Map<string, Map<string, CallableFunction>> = new Map();
 	protected _uid: string | null = null;
 	protected _element: HTMLElement | null = null;
 
@@ -67,7 +67,7 @@ export default class KTComponent {
 
 	protected async _fireEvent(
 		eventType: string,
-		payload: object = null,
+		payload: object | null = null,
 	): Promise<void> {
 		const callbacks = this._events.get(eventType);
 
@@ -86,7 +86,10 @@ export default class KTComponent {
 		);
 	}
 
-	protected _dispatchEvent(eventType: string, payload: object = null): void {
+	protected _dispatchEvent(
+		eventType: string,
+		payload: object | null = null,
+	): void {
 		const event = new CustomEvent(eventType, {
 			detail: { payload },
 			bubbles: true,
@@ -100,6 +103,9 @@ export default class KTComponent {
 
 	protected _getOption(name: string): KTOptionType {
 		const value = this._config[name as keyof object];
+		if (!this._element) {
+			return value as KTOptionType;
+		}
 		const reponsiveValue = KTDom.getCssProp(
 			this._element,
 			`--kt-${this._name}-${KTUtils.camelReverseCase(name)}`,
@@ -163,7 +169,11 @@ export default class KTComponent {
 			this._events.set(eventType, new Map());
 		}
 
-		this._events.get(eventType).set(eventId, callback);
+		const eventMap = this._events.get(eventType);
+		if (!eventMap) {
+			return eventId;
+		}
+		eventMap.set(eventId, callback);
 
 		return eventId;
 	}
@@ -176,7 +186,7 @@ export default class KTComponent {
 		return this._getOption(name as keyof object);
 	}
 
-	public getElement(): HTMLElement {
+	public getElement(): HTMLElement | null {
 		if (!this._element) return null;
 		return this._element;
 	}

package/src/components/datatable/__tests__/currency-sort.test.ts

@@ -8,6 +8,7 @@
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { createSortHandler } from '../datatable-sort';
+import { KTDataTableConfigInterface } from '../types';
 
 describe('KTDataTable - Currency/numeric sort', () => {
 	let thead: HTMLTableSectionElement;
@@ -29,7 +30,7 @@ describe('KTDataTable - Currency/numeric sort', () => {
 			},
 		};
 		const handler = createSortHandler(
-			config as any,
+			config as KTDataTableConfigInterface,
 			thead,
 			() => ({ sortField: null, sortOrder: '' }),
 			noop,
@@ -58,7 +59,7 @@ describe('KTDataTable - Currency/numeric sort', () => {
 			},
 		};
 		const handler = createSortHandler(
-			config as any,
+			config as KTDataTableConfigInterface,
 			thead,
 			() => ({ sortField: null, sortOrder: '' }),
 			noop,
@@ -79,7 +80,7 @@ describe('KTDataTable - Currency/numeric sort', () => {
 	it('without sortType numeric, sorts lexicographically (e.g. £123 before £20)', () => {
 		const config = { columns: {} };
 		const handler = createSortHandler(
-			config as any,
+			config as KTDataTableConfigInterface,
 			thead,
 			() => ({ sortField: null, sortOrder: '' }),
 			noop,

package/src/components/datatable/__tests__/pagination-reset.test.ts

@@ -13,7 +13,7 @@ import { KTDataTableColumnFilterInterface } from '../types';
 describe('KTDataTable - Pagination Reset', () => {
 	let container: HTMLElement;
 	let tableElement: HTMLTableElement;
-	let datatable: KTDataTable<any>;
+	let datatable: KTDataTable<Record<string, unknown>>;
 
 	/**
 	 * Helper: Create a mock datatable with sample data
@@ -177,13 +177,16 @@ describe('KTDataTable - Pagination Reset', () => {
 				// Provide custom search callback that handles objects
 				search: {
 					delay: 500,
-					callback: (data: any[], search: string | object) => {
+					callback: (
+						data: Record<string, unknown>[],
+						search: string | object,
+					) => {
 						if (!search) return data;
 						// For object search, just return all data (simplified for test)
 						if (typeof search === 'object') return data;
 						// String search
-						return data.filter((item: any) =>
-							Object.values(item).some((value: any) =>
+						return data.filter((item: Record<string, unknown>) =>
+							Object.values(item).some((value: unknown) =>
 								String(value)
 									.toLowerCase()
 									.includes((search as string).toLowerCase()),

package/src/components/datatable/__tests__/setup.ts

@@ -46,7 +46,7 @@ Object.defineProperty(window, 'matchMedia', {
 		matches: false,
 		media: query,
 		onchange: null as
-			| ((this: MediaQueryList, ev: MediaQueryListEvent) => any)
+			| ((this: MediaQueryList, ev: MediaQueryListEvent) => unknown)
 			| null,
 		addListener: () => {}, // deprecated
 		removeListener: () => {}, // deprecated

package/src/components/datatable/datatable-checkbox.ts

@@ -25,7 +25,7 @@ export interface KTDataTableCheckboxAPI {
 export function createCheckboxHandler(
 	element: HTMLElement,
 	config: KTDataTableConfigInterface,
-	fireEvent: (eventName: string, eventData?: any) => void,
+	fireEvent: (eventName: string, eventData?: object) => void,
 ): KTDataTableCheckboxAPI {
 	let headerChecked = false;
 	let headerCheckElement: HTMLInputElement | null = null;
@@ -36,7 +36,8 @@ export function createCheckboxHandler(
 
 	// Helper: get selectedRows from state, always as string[]
 	function getSelectedRows(): string[] {
-		if (!config._state) config._state = {} as any;
+		if (!config._state)
+			config._state = {} as unknown as KTDataTableConfigInterface['_state'];
 		if (!Array.isArray(config._state.selectedRows))
 			config._state.selectedRows = [];
 		return config._state.selectedRows.map(String);
@@ -44,7 +45,8 @@ export function createCheckboxHandler(
 
 	// Helper: set selectedRows in state
 	function setSelectedRows(rows: string[]) {
-		if (!config._state) config._state = {} as any;
+		if (!config._state)
+			config._state = {} as unknown as KTDataTableConfigInterface['_state'];
 		config._state.selectedRows = Array.from(new Set(rows.map(String)));
 	}
 
@@ -118,7 +120,7 @@ export function createCheckboxHandler(
 	}
 
 	// When the header checkbox is toggled
-	function checkboxToggle(event?: Event) {
+	function checkboxToggle(_event?: Event) {
 		const checked = !isChecked();
 		// Update state first, then fire events
 		change(checked);

package/src/components/datatable/datatable-sort.ts

@@ -40,8 +40,8 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 		field: keyof T | number,
 		order: KTDataTableSortOrderInterface,
 	) => void,
-	fireEvent: (eventName: string, eventData?: any) => void,
-	dispatchEvent: (eventName: string, eventData?: any) => void,
+	fireEvent: (eventName: string, eventData?: object) => void,
+	dispatchEvent: (eventName: string, eventData?: object) => void,
 	updateData: () => void,
 ): KTDataTableSortAPI<T> {
 	// Helper to compare values for sorting (string)
@@ -93,7 +93,9 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 		| {
 				sortType?: 'string' | 'numeric';
 				sortValue?: (
-					cellValue: unknown,
+					cellValue:
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
 					rowData: KTDataTableDataInterface,
 				) => number | string;
 		  }
@@ -121,8 +123,18 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 			const bRaw = b[sortField as keyof T] as unknown;
 
 			if (typeof sortValueFn === 'function') {
-				const aVal = sortValueFn(aRaw, a as KTDataTableDataInterface);
-				const bVal = sortValueFn(bRaw, b as KTDataTableDataInterface);
+				const aVal = sortValueFn(
+					aRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+					a as KTDataTableDataInterface,
+				);
+				const bVal = sortValueFn(
+					bRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+					b as KTDataTableDataInterface,
+				);
 				const aNum = typeof aVal === 'number' ? aVal : parseNumeric(aVal);
 				const bNum = typeof bVal === 'number' ? bVal : parseNumeric(bVal);
 				if (typeof aVal === 'number' && typeof bVal === 'number') {
@@ -131,8 +143,16 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 				return compareValues(aVal, bVal, sortOrder);
 			}
 			if (useNumeric) {
-				const aNum = parseNumeric(aRaw);
-				const bNum = parseNumeric(bRaw);
+				const aNum = parseNumeric(
+					aRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+				);
+				const bNum = parseNumeric(
+					bRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+				);
 				return compareNumeric(aNum, bNum, sortOrder);
 			}
 			return compareValues(aRaw, bRaw, sortOrder);

package/src/components/datatable/datatable.ts

@@ -13,6 +13,7 @@ import {
 	KTDataTableColumnFilterInterface,
 	KTDataTableAttributeInterface,
 } from './types';
+import { KTOptionType } from '../../types';
 import KTUtils from '../../helpers/utils';
 import KTComponents from '../../index';
 import KTData from '../../helpers/data';
@@ -35,6 +36,20 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	extends KTComponent
 	implements KTDataTableInterface
 {
+	private static asElementWithInstance(element: HTMLElement): HTMLElement & {
+		instance?: KTDataTable<KTDataTableDataInterface>;
+	} {
+		return element as HTMLElement & {
+			instance?: KTDataTable<KTDataTableDataInterface>;
+		};
+	}
+
+	private static asSearchElementWithDebounce(
+		element: HTMLInputElement,
+	): HTMLInputElement & { _debouncedSearch?: EventListener } {
+		return element as HTMLInputElement & { _debouncedSearch?: EventListener };
+	}
+
 	protected override _name: string = 'datatable';
 	protected override _config: KTDataTableConfigInterface;
 	protected override _defaultConfig: KTDataTableConfigInterface;
@@ -88,7 +103,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._buildConfig();
 
 		// Store the instance directly on the element
-		(element as any).instance = this;
+		KTDataTable.asElementWithInstance(element).instance = this;
 
 		this._initElements();
 
@@ -96,7 +111,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._checkbox = createCheckboxHandler(
 			this._element,
 			this._config,
-			(eventName: string, eventData?: any) => {
+			(eventName: string, eventData?: object) => {
 				this._fireEvent(eventName, eventData);
 				this._dispatchEvent(eventName, eventData);
 			},
@@ -284,22 +299,20 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 							return false;
 						}
 
-						return Object.values(item).some(
-							(value: string | number | boolean) => {
-								if (
-									typeof value !== 'string' &&
-									typeof value !== 'number' &&
-									typeof value !== 'boolean'
-								) {
-									return false;
-								}
-
-								const valueText = String(value)
-									.replace(/<[^>]*>|&nbsp;/g, '')
-									.toLowerCase();
-								return valueText.includes(search.toLowerCase());
-							},
-						);
+						return Object.values(item).some((value: KTOptionType) => {
+							if (
+								typeof value !== 'string' &&
+								typeof value !== 'number' &&
+								typeof value !== 'boolean'
+							) {
+								return false;
+							}
+
+							const valueText = String(value)
+								.replace(/<|>|&nbsp;/g, '')
+								.toLowerCase();
+							return valueText.includes(search.toLowerCase());
+						});
 					});
 				},
 			},
@@ -533,11 +546,13 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 		if (searchElement) {
 			// Check if a debounced search function already exists
-			if ((searchElement as any)._debouncedSearch) {
+			const searchWithDebounce =
+				KTDataTable.asSearchElementWithDebounce(searchElement);
+			if (searchWithDebounce._debouncedSearch) {
 				// Remove the existing debounced event listener
 				searchElement.removeEventListener(
 					'keyup',
-					(searchElement as any)._debouncedSearch,
+					searchWithDebounce._debouncedSearch,
 				);
 			}
 
@@ -547,7 +562,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			}, this._config.search.delay);
 
 			// Store the new debounced function as a property of the element
-			(searchElement as any)._debouncedSearch = debouncedSearch;
+			searchWithDebounce._debouncedSearch = debouncedSearch;
 
 			// Add the new debounced event listener
 			searchElement.addEventListener('keyup', debouncedSearch);
@@ -590,10 +605,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		let _temp = (this._data = [...originalData] as T[]);
 
 		if (search) {
+			const searchTerm = typeof search === 'string' ? search : '';
 			_temp = this._data = this._config.search.callback.call(
 				this,
 				this._data,
-				search,
+				searchTerm,
 			) as T[];
 		}
 
@@ -651,7 +667,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 	private _tableConfigInvalidate(): boolean {
 		// Remove _data and _state from config
-		const { _data, _state, ...restConfig } = this._config;
+		const { _state, ...restConfig } = this._config;
 		const checksum: string = KTUtils.checksum(JSON.stringify(restConfig));
 		if (_state._configChecksum !== checksum) {
 			this._config._state._configChecksum = checksum;
@@ -1072,7 +1088,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 					const th = columnsToRender[colIndex];
 					const colName = th?.getAttribute('data-kt-datatable-column');
 					const td = document.createElement('td');
-					let value: any;
+					let value: KTOptionType | '';
 					if (colName && Object.prototype.hasOwnProperty.call(item, colName)) {
 						value = item[colName as keyof T];
 					} else if (Object.prototype.hasOwnProperty.call(item, colIndex)) {
@@ -1564,12 +1580,17 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			document.querySelector<HTMLInputElement>(
 				`[data-kt-datatable-search="#${tableId}"]`,
 			);
-		if (searchElement && (searchElement as any)._debouncedSearch) {
+		if (searchElement) {
+			const searchWithDebounce =
+				KTDataTable.asSearchElementWithDebounce(searchElement);
+			if (!searchWithDebounce._debouncedSearch) {
+				return;
+			}
 			searchElement.removeEventListener(
 				'keyup',
-				(searchElement as any)._debouncedSearch,
+				searchWithDebounce._debouncedSearch,
 			);
-			delete (searchElement as any)._debouncedSearch;
+			delete searchWithDebounce._debouncedSearch;
 		}
 
 		// --- 2. Remove page size dropdown event listener ---
@@ -1587,11 +1608,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 		// --- 4. Dispose of handler objects (checkbox, sort) ---
 		// KTDataTableCheckboxAPI does not have a dispose method, but we can remove header checkbox listener
-		if (
-			this._checkbox &&
-			typeof (this._checkbox as any).dispose === 'function'
-		) {
-			(this._checkbox as any).dispose();
+		const checkboxWithDispose = this._checkbox as KTDataTableCheckboxAPI & {
+			dispose?: () => void;
+		};
+		if (this._checkbox && typeof checkboxWithDispose.dispose === 'function') {
+			checkboxWithDispose.dispose();
 		} else {
 			// Remove header checkbox event listener if possible
 			const headerCheckElement = this._element.querySelector<HTMLInputElement>(
@@ -1619,8 +1640,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._element.classList.remove(this._config.loadingClass);
 
 		// --- 6. Remove instance reference from the DOM element ---
-		if ((this._element as any).instance) {
-			delete (this._element as any).instance;
+		const elementWithInstance = KTDataTable.asElementWithInstance(
+			this._element,
+		);
+		if (elementWithInstance.instance) {
+			delete elementWithInstance.instance;
 		}
 
 		// --- 7. (Optional) Clear localStorage state ---
@@ -1628,9 +1652,12 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		// this._deleteState();
 	}
 
-	private _debounce(func: Function, wait: number) {
+	private _debounce<TArgs extends unknown[]>(
+		func: (...args: TArgs) => void,
+		wait: number,
+	): (...args: TArgs) => void {
 		let timeout: number | undefined;
-		return function (...args: any[]) {
+		return function (...args: TArgs) {
 			const later = () => {
 				clearTimeout(timeout);
 				func(...args);
@@ -1837,7 +1864,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		}
 
 		// Fallback to element's instance property (for manually created instances)
-		return (element as any).instance;
+		return KTDataTable.asElementWithInstance(element).instance;
 	}
 
 	/**

package/src/components/datatable/types.ts

@@ -3,11 +3,13 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
+import { KTOptionType } from '../../types';
+
 // Define the sort order and filter criteria types
 export type KTDataTableSortOrderInterface = 'asc' | 'desc' | '';
 
 export interface KTDataTableDataInterface {
-	[key: string]: string | number | boolean | object;
+	[key: string]: KTOptionType;
 }
 
 export interface KTDataTableAttributeInterface {

package/src/components/drawer/drawer.ts

@@ -448,8 +448,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		if (!drawerElement) {
 			// If element is a toggle button and drawer element wasn't found, return null
 			// The handleToggle() will handle waiting for the element to appear
-			if (element.hasAttribute('data-kt-drawer-toggle')) {
-			}
 			return null;
 		}
 
@@ -485,10 +483,8 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 
 	public static handleResize(): void {
 		window.addEventListener('resize', () => {
-			let timer;
-
 			KTUtils.throttle(
-				timer,
+				undefined,
 				() => {
 					document
 						.querySelectorAll('[data-kt-drawer-initialized]')
@@ -512,8 +508,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 			'click',
 			(rawEvent: MouseEvent) => {
 				const target = rawEvent.target as HTMLElement;
-				if (target && target.hasAttribute('data-kt-drawer-toggle')) {
-				}
+				void (target && target.hasAttribute('data-kt-drawer-toggle'));
 			},
 			true,
 		); // Use capture phase to catch before any stopPropagation
@@ -534,15 +529,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 				if (drawer) {
 					drawer.toggle(target);
 				} else {
-					// Drawer element not found - wait for it to appear (handles persisted Livewire components)
-					// Check if drawer exists in persisted components (might be in header that's persisted)
-					const persistedHeader =
-						document.querySelector('[wire\\:id]')?.closest('[wire\\:id]') ||
-						document.querySelector('header#header');
-					const drawerInPersisted = persistedHeader
-						? persistedHeader.querySelector(selector)
-						: null;
-
 					// Wait longer for persisted components that may take time to render
 					// Also check if drawer exists in persisted header component
 					KTDrawer.waitForElement(selector, 5000).then((drawerElement) => {
@@ -706,11 +692,10 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 					instance.hide(); // This will clean up backdrop and state
 				}
 				// Clear KTData entries
-				const hadDrawer = KTData.has(element as HTMLElement, 'drawer');
 				KTData.remove(element as HTMLElement, 'drawer');
 				// Remove initialization attribute to allow fresh initialization
 				element.removeAttribute('data-kt-drawer-initialized');
-			} catch (e) {
+			} catch {
 				// Ignore errors for individual elements
 			}
 		});

package/src/components/dropdown/dropdown.ts

@@ -120,7 +120,7 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		this._toggle();
 	}
 
-	protected _mouseover(event: MouseEvent): void {
+	protected _mouseover(_event: MouseEvent): void {
 		if (this._disabled) return;
 
 		if (this._getOption('trigger') !== 'hover') return;
@@ -244,7 +244,6 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 	}
 
 	protected _initPopper(): void {
-		const isRtl = KTDom.isRTL();
 		let reference: HTMLElement;
 		const attach = this._getOption('attach') as string;
 
@@ -607,7 +606,7 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 				if (menu) {
 					KTData.remove(menu as HTMLElement, 'dropdownElement');
 				}
-			} catch (e) {
+			} catch {
 				// Ignore errors for individual elements
 			}
 		});