@keenthemes/ktui 1.2.0 → 1.2.2

package/src/components/select/select.ts

@@ -29,7 +29,8 @@ export class KTSelect extends KTComponent {
 	// Core properties
 	protected override readonly _name: string = 'select';
 	protected override readonly _dataOptionPrefix: string = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
-	protected override readonly _config: KTSelectConfigInterface;
+	protected override _element!: HTMLElement;
+	protected override _config: KTSelectConfigInterface;
 	protected override _defaultConfig: KTSelectConfigInterface;
 
 	// Static global configuration
@@ -81,7 +82,7 @@ export class KTSelect extends KTComponent {
 		this._state = new KTSelectState(this._config);
 		this._config = this._state.getConfig();
 
-		(element as any).instance = this;
+		(this._element as HTMLElement & { instance?: KTSelect }).instance = this;
 
 		// Initialize event manager
 		this._eventManager = new EventManager();
@@ -125,8 +126,7 @@ export class KTSelect extends KTComponent {
 	protected override _buildConfig(config: object = {}): void {
 		if (!this._element) return;
 
-		// Cast to writable to allow assignment (config is readonly but needs initialization)
-		(this._config as any) = {
+		this._config = {
 			...this._defaultConfig,
 			...KTSelect.globalConfig,
 			...this._getGlobalConfig(),
@@ -143,7 +143,7 @@ export class KTSelect extends KTComponent {
 	 */
 	protected override _dispatchEvent(
 		eventType: string,
-		payload: object = null,
+		payload: object | null = null,
 	): void {
 		// Call parent method to dispatch on element (existing behavior)
 		super._dispatchEvent(eventType, payload);
@@ -179,6 +179,10 @@ export class KTSelect extends KTComponent {
 		}
 	}
 
+	public override getElement(): HTMLElement {
+		return this._element;
+	}
+
 	/**
 	 * Initialize remote data fetching
 	 */
@@ -461,7 +465,10 @@ export class KTSelect extends KTComponent {
 				optionsContainer.appendChild(
 					defaultTemplates.error({
 						...this._config,
-						errorMessage: message,
+						errorMessage:
+							message ??
+							this._config.remoteErrorMessage ??
+							'Failed to load data',
 					}),
 				);
 				break;
@@ -754,7 +761,7 @@ export class KTSelect extends KTComponent {
 		// Create an empty dropdown first (without options) using template
 		const dropdownElement = defaultTemplates.dropdown({
 			...this._config,
-			zindex: this._config.dropdownZindex,
+			zindex: this._config.dropdownZindex ?? undefined,
 		});
 
 		// Add search input if needed
@@ -1007,13 +1014,20 @@ export class KTSelect extends KTComponent {
 	/**
 	 * Extract nested property value from object using dot notation
 	 */
-	private _getValueByKey(obj: any, key: string): any {
+	private _getValueByKey(obj: unknown, key: string): unknown {
 		if (!key || !obj) return null;
 
 		// Use reduce to walk through the object by splitting the key on dots
-		const result = key
-			.split('.')
-			.reduce((o, k) => (o && o[k] !== undefined ? o[k] : null), obj);
+		const result = key.split('.').reduce((o: unknown, k: string) => {
+			if (
+				o &&
+				typeof o === 'object' &&
+				(o as Record<string, unknown>)[k] !== undefined
+			) {
+				return (o as Record<string, unknown>)[k];
+			}
+			return null;
+		}, obj);
 
 		return result;
 	}
@@ -1300,7 +1314,7 @@ export class KTSelect extends KTComponent {
 		// Sync native select value for FormData support
 		this._syncNativeSelectValue();
 
-		if (tagsEnabled) {
+		if (this._config.tags && this._tagsModule) {
 			// Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
 			this._tagsModule.updateTagsDisplay(selectedOptions);
 		}
@@ -1508,19 +1522,6 @@ export class KTSelect extends KTComponent {
 		if (focusedOption) {
 			const selectedValue = focusedOption.dataset.value;
 
-			// Extract just the title text, not including description
-			let selectedText = '';
-			const titleElement = focusedOption.querySelector(
-				'[data-kt-option-title]',
-			);
-			if (titleElement) {
-				// If it has a structured content with title element
-				selectedText = titleElement.textContent?.trim() || '';
-			} else {
-				// Fallback to the whole text content
-				selectedText = focusedOption.textContent?.trim() || '';
-			}
-
 			// First trigger the selection to ensure state is updated properly
 			if (selectedValue) {
 				this._selectOption(selectedValue);
@@ -1621,7 +1622,7 @@ export class KTSelect extends KTComponent {
 	/**
 	 * Get the search input element
 	 */
-	public getSearchInput(): HTMLInputElement {
+	public getSearchInput(): HTMLInputElement | null {
 		return this._searchInputElement;
 	}
 
@@ -1685,7 +1686,7 @@ export class KTSelect extends KTComponent {
 			if (option.hasAttribute('style')) {
 				const styleAttr = option.getAttribute('style');
 
-				if (styleAttr.includes('display:')) {
+				if (styleAttr && styleAttr.includes('display:')) {
 					// If style only contains display property, remove the entire attribute
 					if (
 						styleAttr.trim() === 'display: none;' ||
@@ -1696,7 +1697,7 @@ export class KTSelect extends KTComponent {
 						// Otherwise, remove just the display property
 						option.setAttribute(
 							'style',
-							styleAttr?.replace(/display:\s*[^;]+;?/gi, '')?.trim(),
+							styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim(),
 						);
 					}
 				}
@@ -1816,7 +1817,7 @@ export class KTSelect extends KTComponent {
 	 */
 	public override dispose(): void {
 		// Clean up event listeners
-		this._eventManager.removeAllListeners(null);
+		this._eventManager.removeAllListeners(this._wrapperElement);
 
 		// Dispose modules
 		if (this._dropdownModule) {
@@ -2464,7 +2465,6 @@ export class KTSelect extends KTComponent {
 		}
 
 		const isOpen = this._dropdownIsOpen;
-		const config = this._config;
 		const focusManager = this._focusManager;
 		const buffer = this._typeToSearchBuffer;
 
@@ -2588,7 +2588,7 @@ export class KTSelect extends KTComponent {
 	}
 
 	public renderDisplayTemplateForSelected(selectedValues: string[]): string {
-		const optionsConfig = (this._config.optionsConfig as any) || {};
+		const optionsConfig = this._config.optionsConfig || {};
 		const displaySeparator = this._config.displaySeparator || ', ';
 		const contentArray = Array.from(
 			new Set(
@@ -2599,7 +2599,7 @@ export class KTSelect extends KTComponent {
 						);
 						if (!option) return '';
 
-						let displayTemplate = this._config.displayTemplate;
+						let displayTemplate = this._config.displayTemplate || '{{text}}';
 						const text = option.getAttribute('data-text') || '';
 
 						// Replace all {{varname}} in option.innerHTML with values from _config
@@ -2757,21 +2757,25 @@ export class KTSelect extends KTComponent {
 			.getVisibleOptions()
 			.filter((opt) => opt.getAttribute('aria-disabled') !== 'true');
 
+		const selectAllButton = this._selectAllButton;
+		const selectAllButtonToggle = this._selectAllButtonToggle;
+		if (!selectAllButton || !selectAllButtonToggle) return;
+
 		if (visibleOptions.length === 0) {
-			this._selectAllButton.style.display = 'none';
+			selectAllButton.style.display = 'none';
 			return;
 		}
 
-		this._selectAllButton.style.display = '';
+		selectAllButton.style.display = '';
 
 		const selectedValues = new Set(this.getSelectedOptions());
 		const isAllSelected = visibleOptions.every((opt) =>
 			selectedValues.has(opt.dataset.value as string),
 		);
 
-		this._selectAllButtonToggle.textContent = isAllSelected
-			? this._config.clearAllText
-			: this._config.selectAllText;
+		selectAllButtonToggle.textContent = isAllSelected
+			? (this._config.clearAllText ?? 'Clear all')
+			: (this._config.selectAllText ?? 'Select all');
 	}
 
 	/**

package/src/components/select/tags.ts

@@ -14,7 +14,7 @@ import { EventManager } from './utils';
 export class KTSelectTags {
 	private _select: KTSelect;
 	private _config: KTSelectConfigInterface;
-	private _valueDisplayElement: HTMLElement;
+	private _valueDisplayElement: HTMLElement | null;
 	private _eventManager: EventManager;
 
 	/**
@@ -32,21 +32,23 @@ export class KTSelectTags {
 	 * Renders selected options as tags in the display element
 	 */
 	public updateTagsDisplay(selectedOptions: string[]): void {
+		if (!this._valueDisplayElement) return;
+		const valueDisplayElement = this._valueDisplayElement;
 		// Remove any existing tag elements
-		const wrapper = this._valueDisplayElement.parentElement;
+		const wrapper = valueDisplayElement.parentElement;
 		if (!wrapper) return;
 
 		// If no options selected, ensure placeholder is shown
 		if (selectedOptions.length === 0) {
 			// Clear any existing content and show placeholder
-			this._valueDisplayElement.innerHTML = '';
+			valueDisplayElement.innerHTML = '';
 			const placeholderEl = defaultTemplates.placeholder(this._config);
-			this._valueDisplayElement.appendChild(placeholderEl);
+			valueDisplayElement.appendChild(placeholderEl);
 			return;
 		}
 
 		// Clear all existing content before adding tags
-		this._valueDisplayElement.innerHTML = '';
+		valueDisplayElement.innerHTML = '';
 
 		// Insert each tag before the display element
 		selectedOptions.forEach((optionValue) => {
@@ -62,7 +64,8 @@ export class KTSelectTags {
 			if (!optionElement) {
 				const originalOptions = this._select
 					.getElement()
-					.querySelectorAll('option');
+					?.querySelectorAll('option');
+				if (!originalOptions) return;
 				for (const opt of Array.from(originalOptions)) {
 					if ((opt as HTMLOptionElement).value === optionValue) {
 						optionElement = opt as HTMLOptionElement;
@@ -70,6 +73,7 @@ export class KTSelectTags {
 					}
 				}
 			}
+			if (!optionElement) return;
 
 			const tag = defaultTemplates.tag(optionElement, this._config);
 
@@ -85,7 +89,7 @@ export class KTSelectTags {
 			}
 
 			// Insert tag inside the display element
-			this._valueDisplayElement.appendChild(tag);
+			valueDisplayElement.appendChild(tag);
 		});
 	}
 
@@ -101,6 +105,8 @@ export class KTSelectTags {
 	 * Clean up resources used by this module
 	 */
 	public destroy(): void {
-		this._eventManager.removeAllListeners(null);
+		if (this._valueDisplayElement) {
+			this._eventManager.removeAllListeners(this._valueDisplayElement);
+		}
 	}
 }

package/src/components/select/templates.ts

@@ -136,7 +136,7 @@ export function getTemplateStrings(
 ): typeof coreTemplateStrings {
 	const templates =
 		config && typeof config === 'object' && 'templates' in config
-			? (config as any).templates
+			? (config as KTSelectConfigInterface).templates
 			: undefined;
 
 	if (templates) {
@@ -264,7 +264,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
 		const isHtmlOption = option instanceof HTMLOptionElement;
-		let optionData: Record<string, any>;
+		let optionData: Record<string, unknown>;
 
 		if (isHtmlOption) {
 			// If it's a plain HTMLOptionElement, construct data similarly to how KTSelectOption would
@@ -288,14 +288,14 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 			).getOptionDataForTemplate();
 		}
 
-		let content = optionData?.text?.trim(); // Default content to option's text
+		let content = String(optionData?.text || '').trim(); // Default content to option's text
 
 		if (config.optionTemplate) {
 			// Use the user-provided template string, rendering with the full optionData.
 			// renderTemplateString will replace {{key}} with values from optionData.
 			content = renderTemplateString(config.optionTemplate, optionData);
 		} else {
-			content = optionData.text || optionData.content; // Prefer explicit text, fallback to content
+			content = String(optionData.text || optionData.content || '');
 		}
 
 		// Use the core option template string as the base structure.
@@ -326,7 +326,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		}
 
 		// Ensure data-text attribute is set to the original, clean text for searching/filtering
-		element.setAttribute('data-text', optionData?.text?.trim() || '');
+		element.setAttribute('data-text', String(optionData?.text || '').trim());
 
 		return element;
 	},
@@ -402,7 +402,12 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 
 			// Replace all {{varname}} in option.innerHTML with values from _config.optionsConfig
 			Object.entries(
-				(config.optionsConfig as any)?.[optionValue] || {},
+				(
+					config.optionsConfig as unknown as Record<
+						string,
+						Record<string, unknown>
+					>
+				)?.[optionValue] || {},
 			).forEach(([key, val]) => {
 				if (
 					typeof val === 'string' ||

package/src/components/select/types.ts

@@ -15,7 +15,7 @@ export interface KTSelectOption {
 }
 
 export interface KTSelectOptionData {
-	[key: string]: any;
+	[key: string]: unknown;
 }
 
 export interface KTSelectState {

package/src/components/select/utils.ts

@@ -5,7 +5,6 @@
 
 // utils.ts
 
-import { defaultTemplates } from './templates';
 import { KTSelectConfigInterface } from './config';
 
 /**
@@ -99,7 +98,7 @@ export class FocusManager {
 	constructor(
 		element: HTMLElement,
 		optionsSelector: string = '[data-kt-select-option]',
-		config?: KTSelectConfigInterface,
+		_config?: KTSelectConfigInterface,
 	) {
 		this._element = element;
 		this._optionsSelector = optionsSelector;
@@ -121,8 +120,7 @@ export class FocusManager {
 			const target = e.target as HTMLElement;
 			const optionElement = target.closest(this._optionsSelector);
 
-			if (optionElement) {
-			}
+			void optionElement;
 		});
 	}
 
@@ -372,7 +370,11 @@ export class FocusManager {
 		const focusedEl = this._element.querySelector(
 			`${this._optionsSelector}.${this._focusClass}`,
 		) as HTMLElement | null;
-		if (focusedEl && !focusedEl.classList.contains('hidden') && focusedEl.style.display !== 'none') {
+		if (
+			focusedEl &&
+			!focusedEl.classList.contains('hidden') &&
+			focusedEl.style.display !== 'none'
+		) {
 			const idx = options.indexOf(focusedEl);
 			if (idx >= 0) {
 				this._focusedOptionIndex = idx;
@@ -438,7 +440,7 @@ export class EventManager {
 		element: HTMLElement,
 		event: string,
 		handler: EventListenerOrEventListenerObject,
-		context?: any,
+		context?: unknown,
 	): void {
 		if (!element) return;
 
@@ -510,12 +512,12 @@ export class EventManager {
  * Debounce function to limit how often a function can be called
  */
 export function debounce(
-	func: (...args: any[]) => void,
+	func: (...args: unknown[]) => void,
 	delay: number,
-): (...args: any[]) => void {
+): (...args: unknown[]) => void {
 	let timeout: ReturnType<typeof setTimeout>;
 
-	return function (...args: any[]) {
+	return function (...args: unknown[]) {
 		clearTimeout(timeout);
 		timeout = setTimeout(() => func(...args), delay);
 	};
@@ -527,7 +529,7 @@ export function debounce(
  */
 export function renderTemplateString(
 	template: string,
-	data: Record<string, any>,
+	data: Record<string, unknown>,
 ): string {
 	return template.replace(/{{(\w+)}}/g, (_, key) =>
 		data[key] !== undefined && data[key] !== null ? String(data[key]) : '',

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

@@ -15,8 +15,13 @@ describe('KTSticky', () => {
 	beforeEach(() => {
 		document.body.innerHTML = '';
 		scrollTop = 0;
-		vi.spyOn(KTDomModule.default, 'getScrollTop').mockImplementation(() => scrollTop);
-		vi.spyOn(KTDomModule.default, 'getViewPort').mockReturnValue({ height: 800, width: 1024 });
+		vi.spyOn(KTDomModule.default, 'getScrollTop').mockImplementation(
+			() => scrollTop,
+		);
+		vi.spyOn(KTDomModule.default, 'getViewPort').mockReturnValue({
+			height: 800,
+			width: 1024,
+		});
 
 		wrapper = document.createElement('div');
 		wrapper.setAttribute('data-kt-sticky-wrapper', 'true');
@@ -151,7 +156,9 @@ describe('KTSticky', () => {
 		it('fires change event when sticky becomes active and when released', async () => {
 			const instance = new KTSticky(stickyEl);
 			const changes: { active: boolean }[] = [];
-			instance.on('change', (payload: { active: boolean }) => changes.push(payload));
+			instance.on('change', (payload: { active: boolean }) =>
+				changes.push(payload),
+			);
 
 			scrollTop = 150;
 			window.dispatchEvent(new Event('scroll', { bubbles: true }));

package/src/components/sticky/sticky.ts

@@ -119,42 +119,35 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 
 		// Store scroll handler reference for cleanup
 		this._scrollHandler = () => {
-
 			this._isScrolling = true;
 
-			if(this._isActive() === true){
-
+			if (this._isActive() === true) {
 				this._debounceScroll(() => {
-
 					this._isScrolling = false;
 					this._process();
-
 				}, 200);
-
-			}else{
-
+			} else {
 				this._isScrolling = false;
 				this._process();
-
 			}
-
 		};
 
 		if (this._targetElement) {
 			if (this._targetElement === document) {
-				window.addEventListener('scroll', this._scrollHandler, { passive: true });
+				window.addEventListener('scroll', this._scrollHandler, {
+					passive: true,
+				});
 			} else {
 				(this._targetElement as HTMLElement).addEventListener(
 					'scroll',
 					this._scrollHandler,
-					{ passive: true }
+					{ passive: true },
 				);
 			}
 		}
 	}
 
 	protected _debounceScroll(callback: () => void, delay: number = 200): void {
-
 		if (this._scrollTimeout) {
 			clearTimeout(this._scrollTimeout);
 		}
@@ -162,7 +155,6 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		this._scrollTimeout = setTimeout(() => {
 			callback();
 		}, delay);
-
 	}
 
 	protected _process(): void {
@@ -352,7 +344,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		const activeClassList = this._getOption('activeClass') as string;
 		if (activeClassList) {
 			KTDom.addClass(this._element, activeClassList);
-		}else{
+		} else {
 			const classList = this._getOption('class') as string;
 			if (classList) {
 				KTDom.addClass(this._element, classList);
@@ -387,10 +379,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		const activeClassList = this._getOption('activeClass') as string;
 		if (activeClassList) {
 			KTDom.removeClass(this._element, activeClassList);
-		}else{
+		} else {
 			const classList = this._getOption('class') as string;
 			if (classList) {
-					KTDom.removeClass(this._element, classList);
+				KTDom.removeClass(this._element, classList);
 			}
 		}
 
@@ -399,12 +391,11 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 			KTDom.addClass(this._element, releaseClassList);
 		}
 
-		if(this._eventTriggerState === false){
+		if (this._eventTriggerState === false) {
 			const releaseDelay = this._getOption('releaseDelay') as number;
-			if(releaseDelay && this._timeoutState === null){
+			if (releaseDelay && this._timeoutState === null) {
 				this._timeoutState = setTimeout(() => {
-
-					if (!this._element){
+					if (!this._element) {
 						return;
 					}
 
@@ -413,17 +404,16 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 					}
 
 					this._timeoutState = null;
-
 				}, releaseDelay);
-			}else{
+			} else {
 				this._resetStyles();
 			}
-		}else{
+		} else {
 			this._timeoutState = null;
 		}
 	}
 
-	protected _resetStyles = function () {
+	protected _resetStyles(): void {
 		this._element.style.top = '';
 		this._element.style.bottom = '';
 		this._element.style.insetInlineStart = '';
@@ -435,7 +425,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		this._element.style.right = '';
 		this._element.style.zIndex = '';
 		this._element.style.position = '';
-	};
+	}
 
 	protected _update(): void {
 		this._timeoutState = null;

package/src/components/sticky/types.ts

@@ -19,9 +19,9 @@ export interface KTStickyConfigInterface {
 	reverse: boolean;
 	release: string;
 	activate: string;
-	releaseDelay: number,
-	activeClass: string,
-	releaseClass: string,
+	releaseDelay: number;
+	activeClass: string;
+	releaseClass: string;
 }
 
 export interface KTStickyInterface {