@keenthemes/ktui 1.0.3

package/src/components/scrollspy/scrollspy.ts

@@ -0,0 +1,224 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+import KTData from '../../helpers/data';
+import KTDom from '../../helpers/dom';
+import KTEventHandler from '../../helpers/event-handler';
+import KTComponent from '../component';
+import { KTScrollspyInterface, KTScrollspyConfigInterface } from './types';
+
+declare global {
+	interface Window {
+		KT_SCROLLSPY_INITIALIZED: boolean;
+		KTScrollspy: typeof KTScrollspy;
+	}
+}
+
+export class KTScrollspy extends KTComponent implements KTScrollspyInterface {
+	protected override _name: string = 'scrollspy';
+	protected override _defaultConfig: KTScrollspyConfigInterface = {
+		target: 'body',
+		offset: 0,
+		smooth: true,
+	};
+	protected override _config: KTScrollspyConfigInterface = this._defaultConfig;
+	protected _targetElement: HTMLElement | Document | null = null;
+	protected _anchorElements: NodeListOf<HTMLElement> | null = null;
+
+	constructor(element: HTMLElement, config?: KTScrollspyConfigInterface) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		if (!this._element) return;
+
+		const targetElement =
+			this._getTarget() === 'body'
+				? document
+				: KTDom.getElement(this._getTarget());
+		if (!targetElement) return;
+
+		this._targetElement = targetElement;
+
+		this._anchorElements = this._element.querySelectorAll(
+			'[data-kt-scrollspy-anchor]',
+		);
+
+		if (!this._anchorElements) return;
+
+		this._handlers();
+		this._update();
+	}
+
+	private _getTarget(): string {
+		return (
+			(this._element.getAttribute('data-kt-scrollspy-target') as string) ||
+			(this._getOption('target') as string)
+		);
+	}
+
+	protected _handlers(): void {
+		if (!this._anchorElements) return;
+
+		this._targetElement.addEventListener('scroll', () => {
+			this._anchorElements.forEach((anchorElement) => {
+				this._updateAnchor(anchorElement);
+			});
+		});
+
+		KTEventHandler.on(
+			this._element,
+			'[data-kt-scrollspy-anchor]',
+			'click',
+			(event: Event, target: HTMLElement) => {
+				event.preventDefault();
+				this._scrollTo(target);
+			},
+		);
+	}
+
+	protected _scrollTo(anchorElement: HTMLElement): void {
+		if (!anchorElement) return;
+
+		const sectionElement = KTDom.getElement(anchorElement.getAttribute('href'));
+		if (!sectionElement) return;
+
+		const targetElement =
+			this._targetElement === document ? window : this._targetElement;
+		if (!targetElement) return;
+
+		let offset = parseInt(this._getOption('offset') as string);
+		if (anchorElement.getAttribute('data-kt-scrollspy-anchor-offset')) {
+			offset = parseInt(
+				anchorElement.getAttribute('data-kt-scrollspy-anchor-offset') as string,
+			);
+		}
+
+		const scrollTop = sectionElement.offsetTop - offset;
+
+		if ('scrollTo' in targetElement) {
+			targetElement.scrollTo({
+				top: scrollTop,
+				left: 0,
+				behavior: this._getOption('smooth') ? 'smooth' : 'instant',
+			});
+		}
+	}
+
+	protected _updateAnchor(anchorElement: HTMLElement): void {
+		const sectionElement = KTDom.getElement(anchorElement.getAttribute('href'));
+		if (!sectionElement) return;
+
+		if (!KTDom.isVisible(anchorElement)) return;
+
+		if (!this._anchorElements) return;
+
+		const scrollPosition =
+			this._targetElement === document
+				? document.documentElement.scrollTop || document.body.scrollTop
+				: (this._targetElement as HTMLElement).scrollTop;
+
+		let offset = parseInt(this._getOption('offset') as string);
+		if (anchorElement.getAttribute('data-kt-scrollspy-anchor-offset')) {
+			offset = parseInt(
+				anchorElement.getAttribute('data-kt-scrollspy-anchor-offset') as string,
+			);
+		}
+
+		const offsetTop = sectionElement.offsetTop;
+
+		if (scrollPosition + offset >= offsetTop) {
+			this._anchorElements.forEach((anchorElement) => {
+				anchorElement.classList.remove('active');
+			});
+
+			const payload = { element: anchorElement };
+			this._fireEvent('activate', payload);
+			this._dispatchEvent('activate', payload);
+
+			anchorElement.classList.add('active');
+
+			const parentAnchorElements = KTDom.parents(
+				anchorElement,
+				'[data-kt-scrollspy-group]',
+			);
+			if (parentAnchorElements) {
+				parentAnchorElements.forEach((parentAnchorElement) => {
+					parentAnchorElement
+						.querySelector('[data-kt-scrollspy-anchor]')
+						?.classList.add('active');
+				});
+			}
+		}
+	}
+
+	protected _update() {
+		if (!this._anchorElements) return;
+
+		this._anchorElements.forEach((anchorElement) => {
+			this._updateAnchor(anchorElement);
+		});
+	}
+
+	protected _isActive(anchorElement: HTMLElement): boolean {
+		return anchorElement.classList.contains('active');
+	}
+
+	public updateAnchor(anchorElement: HTMLElement): void {
+		this._updateAnchor(anchorElement);
+	}
+
+	public isActive(anchorElement: HTMLElement): boolean {
+		return this._isActive(anchorElement);
+	}
+
+	public update(): void {
+		this.update();
+	}
+
+	public scrollTo(anchorElement: HTMLElement): void {
+		this._scrollTo(anchorElement);
+	}
+
+	public static getInstance(element: HTMLElement): KTScrollspy {
+		if (!element) return null;
+
+		if (KTData.has(element, 'scrollspy')) {
+			return KTData.get(element, 'scrollspy') as KTScrollspy;
+		}
+
+		if (element.getAttribute('data-kt-scrollspy')) {
+			return new KTScrollspy(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTScrollspyConfigInterface,
+	): KTScrollspy {
+		return this.getInstance(element) || new KTScrollspy(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-scrollspy]');
+
+		elements.forEach((element) => {
+			new KTScrollspy(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTScrollspy.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTScrollspy = KTScrollspy;
+}

package/src/components/scrollspy/types.ts

@@ -0,0 +1,15 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTScrollspyConfigInterface {
+	target: string;
+	smooth: boolean;
+	offset: number;
+}
+
+export interface KTScrollspyInterface {
+	update(anchorElement: HTMLElement, event: Event): void;
+	scrollTo(anchorElement: HTMLElement): void;
+}

package/src/components/scrollto/index.ts

@@ -0,0 +1,7 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export { KTScrollto } from './scrollto';
+export type { KTScrolltoConfigInterface, KTScrolltoInterface } from './types';

package/src/components/scrollto/scrollto.ts

@@ -0,0 +1,127 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* eslint-disable max-len */
+/* eslint-disable require-jsdoc */
+
+import KTData from '../../helpers/data';
+import KTDom from '../../helpers/dom';
+import KTComponent from '../component';
+import { KTScrolltoInterface, KTScrolltoConfigInterface } from './types';
+
+declare global {
+	interface Window {
+		KT_SCROLLTO_INITIALIZED: boolean;
+		KTScrollto: typeof KTScrollto;
+	}
+}
+
+export class KTScrollto extends KTComponent implements KTScrolltoInterface {
+	protected override _name: string = 'scrollto';
+	protected override _defaultConfig: KTScrolltoConfigInterface = {
+		smooth: true,
+		parent: 'body',
+		target: '',
+		offset: 0,
+	};
+	protected override _config: KTScrolltoConfigInterface = this._defaultConfig;
+	protected _targetElement: HTMLElement;
+
+	constructor(element: HTMLElement, config?: KTScrolltoConfigInterface) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		if (!this._element) return;
+
+		this._targetElement = this._getTargetElement();
+
+		if (!this._targetElement) {
+			return;
+		}
+
+		this._handlers();
+	}
+
+	private _getTargetElement(): HTMLElement | null {
+		return (
+			KTDom.getElement(
+				this._element.getAttribute('data-kt-scrollto') as string,
+			) || KTDom.getElement(this._getOption('target') as string)
+		);
+	}
+
+	protected _handlers(): void {
+		if (!this._element) return;
+
+		this._element.addEventListener('click', (event: Event) => {
+			event.preventDefault();
+			this._scroll();
+		});
+	}
+
+	protected _scroll(): void {
+		const pos =
+			this._targetElement.offsetTop +
+			parseInt(this._getOption('offset') as string);
+
+		let parent: HTMLElement | Window = KTDom.getElement(
+			this._getOption('parent') as string,
+		);
+
+		if (!parent || parent === document.body) {
+			parent = window;
+		}
+
+		parent.scrollTo({
+			top: pos,
+			behavior: (this._getOption('smooth') as boolean) ? 'smooth' : 'instant',
+		});
+	}
+
+	public scroll(): void {
+		this._scroll();
+	}
+
+	public static getInstance(element: HTMLElement): KTScrollto {
+		if (!element) return null;
+
+		if (KTData.has(element, 'scrollto')) {
+			return KTData.get(element, 'scrollto') as KTScrollto;
+		}
+
+		if (element.getAttribute('data-kt-scrollto')) {
+			return new KTScrollto(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTScrolltoConfigInterface,
+	): KTScrollto {
+		return this.getInstance(element) || new KTScrollto(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-scrollto]');
+
+		elements.forEach((element) => {
+			new KTScrollto(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTScrollto.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTScrollto = KTScrollto;
+}

package/src/components/scrollto/types.ts

@@ -0,0 +1,15 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTScrolltoConfigInterface {
+	smooth: boolean;
+	parent: string;
+	target: string;
+	offset: number;
+}
+
+export interface KTScrolltoInterface {
+	scroll(): void;
+}

package/src/components/select/combobox.ts

@@ -0,0 +1,305 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+import { KTSelectConfigInterface } from './config';
+import { KTSelect } from './select';
+import { handleDropdownKeyNavigation } from './utils';
+import { SelectMode } from './types';
+
+/**
+ * KTSelectCombobox - Handles combobox-specific functionality for KTSelect
+ */
+export class KTSelectCombobox {
+	private _select: KTSelect;
+	private _config: KTSelectConfigInterface;
+	private _searchInputElement: HTMLInputElement;
+	private _clearButtonElement: HTMLElement | null;
+	private _boundKeyNavHandler: (event: KeyboardEvent) => void;
+	private _boundInputHandler: (event: Event) => void;
+	private _boundClearHandler: (event: MouseEvent) => void;
+
+	constructor(select: KTSelect) {
+		this._select = select;
+		this._config = select.getConfig();
+
+		// Get the display element (could be the input directly or a parent div)
+		const displayElement = select.getValueDisplayElement();
+
+		// Find the input element - either it's the display element itself or a child
+		this._searchInputElement =
+			displayElement.tagName === 'INPUT'
+				? (displayElement as HTMLInputElement)
+				: displayElement.querySelector('input[data-kt-select-search]');
+
+		// Find the clear button
+		this._clearButtonElement =
+			displayElement.tagName === 'DIV'
+				? displayElement.querySelector('[data-kt-select-clear-button]')
+				: null;
+
+		// Create bound handler references to allow proper cleanup
+		this._boundKeyNavHandler = this._handleComboboxKeyNav.bind(this);
+		this._boundInputHandler = this._handleComboboxInput.bind(this);
+		this._boundClearHandler = this._handleClearButtonClick.bind(this);
+
+		// Attach event listeners
+		this._attachEventListeners();
+
+		if (this._config.debug) console.log('KTSelectCombobox initialized');
+	}
+
+	/**
+	 * Attach event listeners specific to combobox
+	 */
+	private _attachEventListeners(): void {
+		// First remove any existing listeners to prevent duplicates
+		this._removeEventListeners();
+
+		// Add input event handler to filter options as user types
+		this._searchInputElement.addEventListener('input', this._boundInputHandler);
+
+		// Add keyboard navigation for the combobox
+		this._searchInputElement.addEventListener(
+			'keydown',
+			this._boundKeyNavHandler,
+		);
+
+		// Add clear button click event listener
+		if (this._clearButtonElement) {
+			this._clearButtonElement.addEventListener(
+				'click',
+				this._boundClearHandler,
+			);
+		}
+
+		if (this._config.debug)
+			console.log(
+				'Combobox event listeners attached to:',
+				this._searchInputElement,
+			);
+	}
+
+	/**
+	 * Remove event listeners to prevent memory leaks or duplicates
+	 */
+	private _removeEventListeners(): void {
+		if (this._searchInputElement) {
+			this._searchInputElement.removeEventListener(
+				'input',
+				this._boundInputHandler,
+			);
+			this._searchInputElement.removeEventListener(
+				'keydown',
+				this._boundKeyNavHandler,
+			);
+		}
+
+		if (this._clearButtonElement) {
+			this._clearButtonElement.removeEventListener(
+				'click',
+				this._boundClearHandler,
+			);
+		}
+	}
+
+	/**
+	 * Handle combobox input events
+	 */
+	private _handleComboboxInput(event: Event): void {
+		const inputElement = event.target as HTMLInputElement;
+		const query = inputElement.value.toLowerCase();
+
+		if (this._config.debug) console.log('Combobox input event, query:', query);
+
+		// Toggle clear button visibility based on input value
+		this._toggleClearButtonVisibility(query);
+
+		// If dropdown isn't open, open it when user starts typing
+		if (!(this._select as any)._dropdownIsOpen) {
+			this._select.openDropdown();
+		}
+
+		// Filter options based on input
+		this._filterOptionsForCombobox(query);
+	}
+
+	/**
+	 * Handle clear button click
+	 */
+	private _handleClearButtonClick(event: MouseEvent): void {
+		event.preventDefault();
+		event.stopPropagation();
+
+		// Clear the input
+		this._searchInputElement.value = '';
+
+		// Hide the clear button
+		this._toggleClearButtonVisibility('');
+
+		// Show all options and open dropdown
+		this._select.showAllOptions();
+		this._select.openDropdown();
+
+		// Clear the current selection
+		this._select.clearSelection();
+
+		// Focus on the input
+		this._searchInputElement.focus();
+	}
+
+	/**
+	 * Toggle clear button visibility based on input value
+	 */
+	private _toggleClearButtonVisibility(value: string): void {
+		if (!this._clearButtonElement) return;
+
+		if (value.length > 0) {
+			this._clearButtonElement.classList.remove('hidden');
+		} else {
+			this._clearButtonElement.classList.add('hidden');
+		}
+	}
+
+	/**
+	 * Filter options for combobox based on input query
+	 */
+	private _filterOptionsForCombobox(query: string): void {
+		// Access the private method through type assertion
+		(this._select as any)._filterOptionsForCombobox(query);
+	}
+
+	/**
+	 * Handle keyboard navigation in combobox mode
+	 */
+	private _handleComboboxKeyNav(event: KeyboardEvent): void {
+		if (this._config.debug) console.log('Combobox keydown event:', event.key);
+
+		// Prevent event propagation to stop bubbling to other handlers
+		event.stopPropagation();
+
+		// Handle clear with Escape when dropdown is closed
+		if (
+			event.key === 'Escape' &&
+			!(this._select as any)._dropdownIsOpen &&
+			this._searchInputElement.value !== ''
+		) {
+			event.preventDefault();
+			this._searchInputElement.value = '';
+			this._toggleClearButtonVisibility('');
+			this._select.clearSelection();
+			return;
+		}
+
+		// Handle dropdown visibility with special keys
+		if (
+			!(this._select as any)._dropdownIsOpen &&
+			(event.key === 'ArrowDown' ||
+				event.key === 'ArrowUp' ||
+				event.key === 'Enter')
+		) {
+			if (this._config.debug)
+				console.log('Opening dropdown from keyboard in combobox');
+			this._select.openDropdown();
+			event.preventDefault();
+
+			// If it's arrow keys, also move focus
+			if (event.key === 'ArrowDown') {
+				(this._select as any)._focusNextOption();
+			} else if (event.key === 'ArrowUp') {
+				(this._select as any)._focusPreviousOption();
+			}
+			return;
+		}
+
+		// Use the shared keyboard navigation handler
+		handleDropdownKeyNavigation(event, this._select, {
+			multiple: this._config.multiple,
+			closeOnSelect: this._config.closeOnSelect,
+		});
+	}
+
+	/**
+	 * Update the combobox input value when an option is selected
+	 */
+	public updateSelectedValue(selectedText: string): void {
+		if (this._searchInputElement) {
+			// Extract just the text content if it contains HTML
+			let cleanText = selectedText;
+
+			// If the text might contain HTML (when description is present)
+			if (selectedText.includes('<') || selectedText.includes('>')) {
+				// Create a temporary element to extract just the text
+				const tempDiv = document.createElement('div');
+				tempDiv.innerHTML = selectedText;
+
+				// Find and use only the option-title text if available
+				const titleElement = tempDiv.querySelector('[data-kt-option-title]');
+				if (titleElement) {
+					cleanText = titleElement.textContent || selectedText;
+				} else {
+					// Fallback to all text content if option-title not found
+					cleanText = tempDiv.textContent || selectedText;
+				}
+			}
+
+			// Set the input value directly for immediate feedback
+			this._searchInputElement.value = cleanText;
+
+			// Show the clear button if there's a value
+			this._toggleClearButtonVisibility(cleanText);
+
+			// Trigger an input event to ensure any input-based listeners are notified
+			const inputEvent = new Event('input', { bubbles: true });
+			this._searchInputElement.dispatchEvent(inputEvent);
+
+			if (this._config.debug)
+				console.log('Combobox value updated to:', cleanText);
+		}
+	}
+
+	/**
+	 * Reset the input value to match the current selection
+	 * This can be called to sync the input with the current state
+	 */
+	public resetInputValueToSelection(): void {
+		const selectedOptions = this._select.getSelectedOptions();
+		if (selectedOptions.length > 0) {
+			const selectedOption = Array.from(this._select.getOptionsElement()).find(
+				(opt) => opt.dataset.value === selectedOptions[0],
+			) as HTMLElement;
+
+			if (selectedOption) {
+				// Find the option-title element to get just the title text
+				const titleElement = selectedOption.querySelector(
+					'[data-kt-option-title]',
+				);
+				let selectedText = '';
+
+				if (titleElement) {
+					// If it has a structured content with a title element
+					selectedText = titleElement.textContent?.trim() || '';
+				} else {
+					// Fallback to the whole text content
+					selectedText = selectedOption.textContent?.trim() || '';
+				}
+
+				this.updateSelectedValue(selectedText);
+			}
+		} else {
+			// No selection, clear the input
+			if (this._searchInputElement) {
+				this._searchInputElement.value = '';
+				this._toggleClearButtonVisibility('');
+			}
+		}
+	}
+
+	/**
+	 * Destroy the combobox component and clean up event listeners
+	 */
+	public destroy(): void {
+		this._removeEventListeners();
+	}
+}