@keenthemes/ktui 1.0.20 → 1.0.21

package/src/components/datatable/datatable.ts

@@ -499,7 +499,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		// Set search value
 		if (searchElement) {
 			searchElement.value =
-				search === undefined || search === null ? '' : typeof search === 'string' ? search : String(search);
+				search === undefined || search === null
+					? ''
+					: typeof search === 'string'
+						? search
+						: String(search);
 		}
 
 		if (searchElement) {
@@ -834,7 +838,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	private _createUrl(
 		pathOrUrl: string,
 		baseUrl: string | null = window.location.origin,
-	) : URL {
+	): URL {
 		// Regular expression to check if the input is a full URL
 		const isFullUrl = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//.test(pathOrUrl);
 
@@ -988,10 +992,12 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 						if (typeof columnDef.render === 'function') {
 							const result = columnDef.render.call(this, item[key], item, this);
-							if (result instanceof HTMLElement || result instanceof DocumentFragment) {
+							if (
+								result instanceof HTMLElement ||
+								result instanceof DocumentFragment
+							) {
 								td.appendChild(result);
-							}
-							else if (typeof result === 'string') {
+							} else if (typeof result === 'string') {
 								td.innerHTML = result as string;
 							}
 						} else {
@@ -1423,77 +1429,80 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		return id;
 	}
 
-    /**
-     * Clean up all event listeners, handlers, and DOM nodes created by this instance.
-     * This method is called before re-rendering or when disposing the component.
-     */
-    private _dispose() {
-        // --- 1. Remove search input event listener (debounced) ---
-        const tableId: string = this._tableId();
-        const searchElement: HTMLInputElement | null =
-            document.querySelector<HTMLInputElement>(
-                `[data-kt-datatable-search="#${tableId}"]`,
-            );
-        if (searchElement && (searchElement as any)._debouncedSearch) {
-            searchElement.removeEventListener(
-                'keyup',
-                (searchElement as any)._debouncedSearch,
-            );
-            delete (searchElement as any)._debouncedSearch;
-        }
-
-        // --- 2. Remove page size dropdown event listener ---
-        if (this._sizeElement && this._sizeElement.onchange) {
-            this._sizeElement.onchange = null;
-        }
-
-        // --- 3. Remove all pagination button event listeners ---
-        if (this._paginationElement) {
-            // Remove all child nodes (buttons) to ensure no lingering listeners
-            while (this._paginationElement.firstChild) {
-                this._paginationElement.removeChild(this._paginationElement.firstChild);
-            }
-        }
-
-        // --- 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();
-        } else {
-            // Remove header checkbox event listener if possible
-            const headerCheckElement = this._element.querySelector<HTMLInputElement>(
-                this._config.attributes.check,
-            );
-            if (headerCheckElement) {
-                headerCheckElement.replaceWith(headerCheckElement.cloneNode(true));
-            }
-        }
-        // KTDataTableSortAPI does not have a dispose method, but we can remove th click listeners by replacing them
-        if (this._theadElement) {
-            const ths = this._theadElement.querySelectorAll('th');
-            ths.forEach((th) => {
-                th.replaceWith(th.cloneNode(true));
-            });
-        }
-
-        // --- 5. Remove spinner DOM node if it exists ---
-        const spinner = this._element.querySelector<HTMLElement>(
-            this._config.attributes.spinner,
-        );
-        if (spinner && spinner.parentNode) {
-            spinner.parentNode.removeChild(spinner);
-        }
-        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;
-        }
-
-        // --- 7. (Optional) Clear localStorage state ---
-        // Uncomment the following line if you want to clear state on dispose:
-        // this._deleteState();
-    }
+	/**
+	 * Clean up all event listeners, handlers, and DOM nodes created by this instance.
+	 * This method is called before re-rendering or when disposing the component.
+	 */
+	private _dispose() {
+		// --- 1. Remove search input event listener (debounced) ---
+		const tableId: string = this._tableId();
+		const searchElement: HTMLInputElement | null =
+			document.querySelector<HTMLInputElement>(
+				`[data-kt-datatable-search="#${tableId}"]`,
+			);
+		if (searchElement && (searchElement as any)._debouncedSearch) {
+			searchElement.removeEventListener(
+				'keyup',
+				(searchElement as any)._debouncedSearch,
+			);
+			delete (searchElement as any)._debouncedSearch;
+		}
+
+		// --- 2. Remove page size dropdown event listener ---
+		if (this._sizeElement && this._sizeElement.onchange) {
+			this._sizeElement.onchange = null;
+		}
+
+		// --- 3. Remove all pagination button event listeners ---
+		if (this._paginationElement) {
+			// Remove all child nodes (buttons) to ensure no lingering listeners
+			while (this._paginationElement.firstChild) {
+				this._paginationElement.removeChild(this._paginationElement.firstChild);
+			}
+		}
+
+		// --- 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();
+		} else {
+			// Remove header checkbox event listener if possible
+			const headerCheckElement = this._element.querySelector<HTMLInputElement>(
+				this._config.attributes.check,
+			);
+			if (headerCheckElement) {
+				headerCheckElement.replaceWith(headerCheckElement.cloneNode(true));
+			}
+		}
+		// KTDataTableSortAPI does not have a dispose method, but we can remove th click listeners by replacing them
+		if (this._theadElement) {
+			const ths = this._theadElement.querySelectorAll('th');
+			ths.forEach((th) => {
+				th.replaceWith(th.cloneNode(true));
+			});
+		}
+
+		// --- 5. Remove spinner DOM node if it exists ---
+		const spinner = this._element.querySelector<HTMLElement>(
+			this._config.attributes.spinner,
+		);
+		if (spinner && spinner.parentNode) {
+			spinner.parentNode.removeChild(spinner);
+		}
+		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;
+		}
+
+		// --- 7. (Optional) Clear localStorage state ---
+		// Uncomment the following line if you want to clear state on dispose:
+		// this._deleteState();
+	}
 
 	private _debounce(func: Function, wait: number) {
 		let timeout: number | undefined;
@@ -1770,9 +1779,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
  */
 
 export function initAllDataTables(): void {
-  if (typeof document !== 'undefined') {
-    KTDataTable.createInstances();
-    // Optionally assign to window for legacy support
-    window.KTDataTable = KTDataTable;
-  }
+	if (typeof document !== 'undefined') {
+		KTDataTable.createInstances();
+		// Optionally assign to window for legacy support
+		window.KTDataTable = KTDataTable;
+	}
 }

package/src/components/image-input/image-input.ts

@@ -26,6 +26,7 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 	protected _previewElement: HTMLElement;
 	protected _previewUrl: string = '';
 	protected _lastMode: string;
+	protected _selectedFile: File | null = null;
 
 	constructor(
 		element: HTMLElement,
@@ -87,6 +88,7 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 		};
 
 		reader.readAsDataURL(this._inputElement.files[0]);
+		this._selectedFile = this._inputElement.files[0];
 		this._inputElement.value = '';
 		this._hiddenElement.value = '';
 		this._lastMode = 'new';
@@ -125,6 +127,7 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 
 			this._inputElement.value = '';
 			this._hiddenElement.value = '';
+			this._selectedFile = null;
 
 			this._lastMode = 'saved';
 		} else if (this._lastMode == 'saved') {
@@ -138,6 +141,7 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 
 			this._hiddenElement.value = '1';
 			this._inputElement.value = '';
+			this._selectedFile = null;
 
 			this._lastMode = 'placeholder';
 		} else if (this._lastMode == 'placeholder') {
@@ -154,6 +158,7 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 
 			this._inputElement.value = '';
 			this._hiddenElement.value = '';
+			this._selectedFile = null;
 
 			this._lastMode = 'saved';
 		}
@@ -187,11 +192,11 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 	}
 
 	public isEmpty(): boolean {
-		return this._inputElement.value.length === 0;
+		return this._selectedFile === null;
 	}
 
 	public isChanged(): boolean {
-		return this._inputElement.value.length > 0;
+		return this._selectedFile !== null;
 	}
 
 	public remove(): void {
@@ -210,6 +215,10 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 		return this._getPreviewUrl();
 	}
 
+	public getSelectedFile(): File | null {
+		return this._selectedFile;
+	}
+
 	public static getInstance(element: HTMLElement): KTImageInput {
 		if (!element) return null;
 

package/src/components/image-input/types.ts

@@ -9,4 +9,5 @@ export interface KTImageInputConfigInterface {
 
 export interface KTImageInputInterface {
 	remove(): void;
+	getSelectedFile(): File | null;
 }

package/src/components/input/input-group.css

@@ -7,7 +7,7 @@
 	/* Base input group styles */
 	.kt-input-group {
 		@apply flex items-stretch relative;
-		
+
 		.kt-input {
 			@apply grow z-1;
 		}

package/src/components/input/input.css

@@ -9,7 +9,7 @@
 	.kt-input {
 		@apply outline-0 block w-full bg-background border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground;
 		@apply focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px];
-		@apply disabled:cursor-not-allowed disabled:opacity-60; 
+		@apply disabled:cursor-not-allowed disabled:opacity-60;
 		@apply [&[readonly]]:bg-muted/80 [&[readonly]]:cursor-not-allowed [&[readonly]]:text-secondary-foreground/80;
 		@apply file:h-full [&[type=file]]:py-0;
 		@apply file:border-solid file:border-input file:bg-transparent file:font-medium file:not-italic file:text-foreground file:p-0 file:border-0 file:border-e;

package/src/components/scrollable/scrollable.css

@@ -7,7 +7,7 @@
 	:root {
 		--kt-scrollable-scrollbar-size: 5px;
 		--kt-scrollable-thumb-color: var(--color-accent);
-	}	
+	}
 
 	.kt-scrollable::-webkit-scrollbar {
 		width: var(--kt-scrollable-scrollbar-size);
@@ -21,10 +21,10 @@
 	.kt-scrollable::-webkit-scrollbar-thumb {
 		background: var(--kt-scrollable-thumb-color);
 		border-radius: var(--kt-scrollable-scrollbar-size);
-	}	
+	}
 
 	/* Firefox */
-	@-moz-document url-prefix() { 
+	@-moz-document url-prefix() {
 		.kt-scrollable {
 			scrollbar-width: thin;
 			scrollbar-color: var(--kt-scrollable-thumb-color) transparent;

package/src/components/select/combobox.ts

@@ -26,9 +26,15 @@ export class KTSelectCombobox {
 
 		const displayElement = select.getDisplayElement(); // KTSelect's main display element for combobox
 
-		this._searchInputElement = displayElement.querySelector('input[data-kt-select-search]');
-		this._clearButtonElement = displayElement.querySelector('[data-kt-select-clear-button]');
-		this._valuesContainerElement = displayElement.querySelector('[data-kt-select-combobox-values]');
+		this._searchInputElement = displayElement.querySelector(
+			'input[data-kt-select-search]',
+		);
+		this._clearButtonElement = displayElement.querySelector(
+			'[data-kt-select-clear-button]',
+		);
+		this._valuesContainerElement = displayElement.querySelector(
+			'[data-kt-select-combobox-values]',
+		);
 
 		this._boundInputHandler = this._handleComboboxInput.bind(this);
 		this._boundClearHandler = this._handleClearButtonClick.bind(this);
@@ -42,7 +48,7 @@ export class KTSelectCombobox {
 				this.updateDisplay(this._select.getSelectedOptions());
 			} else {
 				// For tags or displayTemplate, the input should be clear for typing.
-			this._searchInputElement.value = '';
+				this._searchInputElement.value = '';
 			}
 			this._toggleClearButtonVisibility(this._searchInputElement.value);
 			// this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
@@ -56,11 +62,18 @@ export class KTSelectCombobox {
 	 */
 	private _attachEventListeners(): void {
 		this._removeEventListeners();
-		if (this._searchInputElement) { // Ensure element exists
-			this._searchInputElement.addEventListener('input', this._boundInputHandler);
+		if (this._searchInputElement) {
+			// Ensure element exists
+			this._searchInputElement.addEventListener(
+				'input',
+				this._boundInputHandler,
+			);
 		}
 		if (this._clearButtonElement) {
-			this._clearButtonElement.addEventListener('click', this._boundClearHandler);
+			this._clearButtonElement.addEventListener(
+				'click',
+				this._boundClearHandler,
+			);
 		}
 	}
 
@@ -69,10 +82,16 @@ export class KTSelectCombobox {
 	 */
 	private _removeEventListeners(): void {
 		if (this._searchInputElement) {
-			this._searchInputElement.removeEventListener('input', this._boundInputHandler);
+			this._searchInputElement.removeEventListener(
+				'input',
+				this._boundInputHandler,
+			);
 		}
 		if (this._clearButtonElement) {
-			this._clearButtonElement.removeEventListener('click', this._boundClearHandler);
+			this._clearButtonElement.removeEventListener(
+				'click',
+				this._boundClearHandler,
+			);
 		}
 	}
 
@@ -85,7 +104,8 @@ export class KTSelectCombobox {
 
 		this._toggleClearButtonVisibility(query);
 
-		if (!(this._select as any).isDropdownOpen()) { // Use public getter
+		if (!(this._select as any).isDropdownOpen()) {
+			// Use public getter
 			this._select.openDropdown();
 		}
 		// For single select without displayTemplate, if user types, they are essentially clearing the previous selection text
@@ -127,7 +147,11 @@ export class KTSelectCombobox {
 		if (!this._clearButtonElement) return;
 		const hasSelectedItems = this._select.getSelectedOptions().length > 0;
 
-		if (inputValue.length > 0 || (hasSelectedItems && (this._config.multiple || this._config.displayTemplate))) {
+		if (
+			inputValue.length > 0 ||
+			(hasSelectedItems &&
+				(this._config.multiple || this._config.displayTemplate))
+		) {
 			this._clearButtonElement.classList.remove('hidden');
 		} else {
 			this._clearButtonElement.classList.add('hidden');
@@ -138,7 +162,9 @@ export class KTSelectCombobox {
 	 * Filter options for combobox based on input query
 	 */
 	private _filterOptionsForCombobox(query: string): void {
-		const options = Array.from(this._select.getOptionsElement()) as HTMLElement[];
+		const options = Array.from(
+			this._select.getOptionsElement(),
+		) as HTMLElement[];
 		const config = this._select.getConfig();
 		const dropdownElement = this._select.getDropdownElement();
 		filterOptions(options, query, config, dropdownElement);
@@ -160,41 +186,65 @@ export class KTSelectCombobox {
 			this._valuesContainerElement.innerHTML = '';
 		}
 
-		if (this._config.tags && this._valuesContainerElement) { // Combobox + Tags
-			selectedOptions.forEach(value => {
+		if (this._config.tags && this._valuesContainerElement) {
+			// Combobox + Tags
+			selectedOptions.forEach((value) => {
 				// Ensure value is properly escaped for querySelector
-				const optionElement = this._select.getElement().querySelector(`option[value="${CSS.escape(value)}"]`) as HTMLOptionElement;
+				const optionElement = this._select
+					.getElement()
+					.querySelector(
+						`option[value="${CSS.escape(value)}"]`,
+					) as HTMLOptionElement;
 				if (optionElement) {
 					const tagElement = defaultTemplates.tag(optionElement, this._config);
 					this._valuesContainerElement.appendChild(tagElement);
 				}
 			});
 			this._searchInputElement.value = ''; // Input field is for typing new searches
-			this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
-
-		} else if (this._config.displayTemplate && this._valuesContainerElement) { // Combobox + DisplayTemplate (no tags)
-			this._valuesContainerElement.innerHTML = this._select.renderDisplayTemplateForSelected(selectedOptions);
+			this._searchInputElement.placeholder =
+				selectedOptions.length > 0
+					? ''
+					: this._config.placeholder || 'Select...';
+		} else if (this._config.displayTemplate && this._valuesContainerElement) {
+			// Combobox + DisplayTemplate (no tags)
+			this._valuesContainerElement.innerHTML =
+				this._select.renderDisplayTemplateForSelected(selectedOptions);
 			this._searchInputElement.value = ''; // Input field is for typing new searches
-			this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
-
-		} else if (this._config.multiple && this._valuesContainerElement) { // Combobox + Multiple (no tags, no display template)
+			this._searchInputElement.placeholder =
+				selectedOptions.length > 0
+					? ''
+					: this._config.placeholder || 'Select...';
+		} else if (this._config.multiple && this._valuesContainerElement) {
+			// Combobox + Multiple (no tags, no display template)
 			// For simplicity, join text. A proper tag implementation would be more complex here.
-			this._valuesContainerElement.innerHTML = selectedOptions.map(value => {
-				const optionEl = this._select.getElement().querySelector(`option[value="${CSS.escape(value)}"]`);
-				return optionEl ? optionEl.textContent : '';
-			}).join(', '); // Basic comma separation
+			this._valuesContainerElement.innerHTML = selectedOptions
+				.map((value) => {
+					const optionEl = this._select
+						.getElement()
+						.querySelector(`option[value="${CSS.escape(value)}"]`);
+					return optionEl ? optionEl.textContent : '';
+				})
+				.join(', '); // Basic comma separation
 			this._searchInputElement.value = '';
-			this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
-
-		} else if (!this._config.multiple && selectedOptions.length > 0) { // Single select combobox: display selected option's text in the input
+			this._searchInputElement.placeholder =
+				selectedOptions.length > 0
+					? ''
+					: this._config.placeholder || 'Select...';
+		} else if (!this._config.multiple && selectedOptions.length > 0) {
+			// Single select combobox: display selected option's text in the input
 			const selectedValue = selectedOptions[0];
-			const optionElement = this._select.getElement().querySelector(`option[value="${CSS.escape(selectedValue)}"]`);
-			this._searchInputElement.value = optionElement ? optionElement.textContent || '' : '';
+			const optionElement = this._select
+				.getElement()
+				.querySelector(`option[value="${CSS.escape(selectedValue)}"]`);
+			this._searchInputElement.value = optionElement
+				? optionElement.textContent || ''
+				: '';
 			// placeholder is implicitly handled by input value for single select
-
-		} else { // No selection or not fitting above categories (e.g. single select, no items)
+		} else {
+			// No selection or not fitting above categories (e.g. single select, no items)
 			this._searchInputElement.value = '';
-			this._searchInputElement.placeholder = this._config.placeholder || 'Select...';
+			this._searchInputElement.placeholder =
+				this._config.placeholder || 'Select...';
 			// _valuesContainerElement is already cleared if it exists
 		}
 		this._toggleClearButtonVisibility(this._searchInputElement.value);

package/src/components/select/dropdown.ts

@@ -106,9 +106,7 @@ export class KTSelectDropdown extends KTComponent {
 
 		if (this._config.disabled) {
 			if (this._config.debug)
-				console.log(
-					'KTSelectDropdown._handleToggleClick: select is disabled',
-				);
+				console.log('KTSelectDropdown._handleToggleClick: select is disabled');
 			return;
 		}
 
@@ -251,9 +249,7 @@ export class KTSelectDropdown extends KTComponent {
 	public open(): void {
 		if (this._config.disabled) {
 			if (this._config.debug)
-				console.log(
-					'KTSelectDropdown.open: select is disabled, not opening',
-				);
+				console.log('KTSelectDropdown.open: select is disabled, not opening');
 			return;
 		}
 		if (this._isOpen || this._isTransitioning) return;
@@ -279,17 +275,26 @@ export class KTSelectDropdown extends KTComponent {
 		}
 
 		// Consider the dropdown's current z-index if it's already set and higher
-		const currentDropdownZIndexStr = KTDom.getCssProp(this._dropdownElement, 'z-index');
+		const currentDropdownZIndexStr = KTDom.getCssProp(
+			this._dropdownElement,
+			'z-index',
+		);
 		if (currentDropdownZIndexStr && currentDropdownZIndexStr !== 'auto') {
 			const currentDropdownZIndex = parseInt(currentDropdownZIndexStr);
-			if (!isNaN(currentDropdownZIndex) && currentDropdownZIndex > (zIndexToApply || 0)) {
+			if (
+				!isNaN(currentDropdownZIndex) &&
+				currentDropdownZIndex > (zIndexToApply || 0)
+			) {
 				zIndexToApply = currentDropdownZIndex;
 			}
 		}
 
 		// Ensure dropdown is above elements within its original toggle's parent context
 		const toggleParentContextZindex = KTDom.getHighestZindex(this._element); // _element is the select wrapper
-		if (toggleParentContextZindex !== null && toggleParentContextZindex >= (zIndexToApply || 0)) {
+		if (
+			toggleParentContextZindex !== null &&
+			toggleParentContextZindex >= (zIndexToApply || 0)
+		) {
 			zIndexToApply = toggleParentContextZindex + 1;
 		}
 
@@ -379,7 +384,9 @@ export class KTSelectDropdown extends KTComponent {
 
 		KTDom.transitionEnd(this._dropdownElement, completeTransition);
 
-		if (KTDom.getCssProp(this._dropdownElement, 'transition-duration') === '0s') {
+		if (
+			KTDom.getCssProp(this._dropdownElement, 'transition-duration') === '0s'
+		) {
 			completeTransition();
 		}
 	}
@@ -422,7 +429,9 @@ export class KTSelectDropdown extends KTComponent {
 	private _resolveDropdownContainer(): HTMLElement | null {
 		const containerSelector = this._config.dropdownContainer;
 		if (containerSelector && containerSelector !== 'body') {
-			const containerElement = document.querySelector(containerSelector) as HTMLElement | null;
+			const containerElement = document.querySelector(
+				containerSelector,
+			) as HTMLElement | null;
 			if (!containerElement && this._config.debug) {
 				console.warn(
 					`KTSelectDropdown: dropdownContainer selector "${containerSelector}" not found. Dropdown will remain in its default position.`,

package/src/components/select/index.ts

@@ -9,5 +9,10 @@ export { KTSelectCombobox } from './combobox';
 export { KTSelectSearch } from './search';
 export { KTSelectTags } from './tags';
 export { KTSelectDropdown } from './dropdown';
-export { filterOptions, FocusManager, EventManager, TypeToSearchBuffer } from './utils';
+export {
+	filterOptions,
+	FocusManager,
+	EventManager,
+	TypeToSearchBuffer,
+} from './utils';
 export { KTSelectConfigInterface, KTSelectOption } from './config';

package/src/components/select/option.ts

@@ -4,9 +4,7 @@
  */
 
 import KTComponent from '../component';
-import {
-	KTSelectConfigInterface,
-} from './config';
+import { KTSelectConfigInterface } from './config';
 import { defaultTemplates } from './templates';
 
 export class KTSelectOption extends KTComponent {
@@ -15,7 +13,7 @@ export class KTSelectOption extends KTComponent {
 	protected override readonly _config: KTSelectConfigInterface; // Holds option-specific data from data-kt-*
 	private _globalConfig: KTSelectConfigInterface; // Main select's config
 
-	constructor(element: HTMLElement, config?: KTSelectConfigInterface,) {
+	constructor(element: HTMLElement, config?: KTSelectConfigInterface) {
 		super();
 
 		// Always initialize a new option instance
@@ -30,13 +28,16 @@ export class KTSelectOption extends KTComponent {
 		// Ensure optionsConfig is initialized
 		if (this._globalConfig) {
 			this._globalConfig.optionsConfig = this._globalConfig.optionsConfig || {};
-			this._globalConfig.optionsConfig[(element as HTMLInputElement).value] = this._config;
+			this._globalConfig.optionsConfig[(element as HTMLInputElement).value] =
+				this._config;
 			// console.log('[KTSelectOption] Populating _globalConfig.optionsConfig for value', (element as HTMLInputElement).value, 'with:', JSON.parse(JSON.stringify(this._config)));
 			// console.log('[KTSelectOption] _globalConfig.optionsConfig is now:', JSON.parse(JSON.stringify(this._globalConfig.optionsConfig)));
 		} else {
 			// Handle case where _globalConfig might be undefined, though constructor expects it.
 			// This might indicate a need to ensure config is always passed or has a default.
-			console.warn('KTSelectOption: _globalConfig is undefined during constructor.');
+			console.warn(
+				'KTSelectOption: _globalConfig is undefined during constructor.',
+			);
 		}
 
 		// Don't store in KTData to avoid Singleton pattern issues