@keenthemes/ktui 1.2.4 → 1.2.6

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

@@ -0,0 +1,267 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+import KTData from '../../helpers/data';
+import KTComponent from '../component';
+import {
+	KTInputNumberConfigInterface,
+	KTInputNumberEventPayloadInterface,
+	KTInputNumberInterface,
+} from './types';
+
+declare global {
+	interface Window {
+		KTInputNumber: typeof KTInputNumber;
+	}
+}
+
+export class KTInputNumber
+	extends KTComponent
+	implements KTInputNumberInterface
+{
+	protected override _name: string = 'input-number';
+	protected override _defaultConfig: KTInputNumberConfigInterface = {};
+	protected override _config: KTInputNumberConfigInterface =
+		this._defaultConfig;
+	protected _numberInput: HTMLInputElement | null = null;
+	protected _onNativeInput: ((e: Event) => void) | null = null;
+	protected _onNativeChange: ((e: Event) => void) | null = null;
+	protected _onDecrementClick: ((e: Event) => void) | null = null;
+	protected _onIncrementClick: ((e: Event) => void) | null = null;
+	protected _decrementElement: HTMLElement | null = null;
+	protected _incrementElement: HTMLElement | null = null;
+
+	constructor(
+		element: HTMLElement,
+		config: KTInputNumberConfigInterface | null = null,
+	) {
+		super();
+
+		const input = KTInputNumber.findNumberInput(element);
+		if (!input) {
+			return;
+		}
+
+		if (this._shouldSkipInit(element)) {
+			return;
+		}
+
+		this._numberInput = input;
+		this._init(element);
+		this._buildConfig(config);
+
+		this._onNativeInput = this._handleNativeInput.bind(this);
+		this._onNativeChange = this._handleNativeChange.bind(this);
+		this._element?.addEventListener('input', this._onNativeInput);
+		this._element?.addEventListener('change', this._onNativeChange);
+
+		this._decrementElement =
+			this._element?.querySelector<HTMLElement>(
+				'[data-kt-input-number-decrement]',
+			) ?? null;
+		this._incrementElement =
+			this._element?.querySelector<HTMLElement>(
+				'[data-kt-input-number-increment]',
+			) ?? null;
+
+		this._onDecrementClick = (e: Event) => {
+			e.preventDefault();
+			if (!this._numberInput || this._numberInput.disabled) return;
+			if (typeof this._numberInput.stepDown === 'function') {
+				this._numberInput.stepDown();
+			}
+		};
+		this._onIncrementClick = (e: Event) => {
+			e.preventDefault();
+			if (!this._numberInput || this._numberInput.disabled) return;
+			if (typeof this._numberInput.stepUp === 'function') {
+				this._numberInput.stepUp();
+			}
+		};
+
+		if (this._decrementElement && this._onDecrementClick) {
+			this._decrementElement.addEventListener('click', this._onDecrementClick);
+		}
+		if (this._incrementElement && this._onIncrementClick) {
+			this._incrementElement.addEventListener('click', this._onIncrementClick);
+		}
+	}
+
+	private static findNumberInput(root: HTMLElement): HTMLInputElement | null {
+		if (root instanceof HTMLInputElement && root.type === 'number') {
+			return root;
+		}
+		return root.querySelector<HTMLInputElement>('input[type="number"]');
+	}
+
+	protected _getNumericMin(): number | undefined {
+		const input = this._numberInput;
+		if (!input) return undefined;
+		if (typeof input.min === 'string' && input.min !== '') {
+			const n = parseFloat(input.min);
+			if (Number.isFinite(n)) return n;
+		}
+		return undefined;
+	}
+
+	protected _getNumericMax(): number | undefined {
+		const input = this._numberInput;
+		if (!input) return undefined;
+		if (typeof input.max === 'string' && input.max !== '') {
+			const n = parseFloat(input.max);
+			if (Number.isFinite(n)) return n;
+		}
+		return undefined;
+	}
+
+	protected _getStepForPayload(): number | undefined {
+		const input = this._numberInput;
+		if (!input) return undefined;
+		const raw = input.getAttribute('step');
+		if (raw === 'any') return undefined;
+		if (raw === null || raw === '') return 1;
+		const n = parseFloat(raw);
+		return Number.isFinite(n) && n > 0 ? n : 1;
+	}
+
+	protected _getCurrentNumericValue(): number | null {
+		const input = this._numberInput;
+		if (!input) return null;
+		if (input.value === '') {
+			return null;
+		}
+		const n =
+			typeof input.valueAsNumber === 'number' &&
+			!Number.isNaN(input.valueAsNumber)
+				? input.valueAsNumber
+				: parseFloat(input.value);
+		return Number.isFinite(n) ? n : null;
+	}
+
+	protected _buildEventPayload(): KTInputNumberEventPayloadInterface {
+		const input = this._numberInput;
+		const min = this._getNumericMin();
+		const max = this._getNumericMax();
+		const step = this._getStepForPayload();
+		const value = this._getCurrentNumericValue();
+		const valueAsString = input?.value ?? '';
+		return {
+			value,
+			valueAsString,
+			...(min !== undefined ? { min } : {}),
+			...(max !== undefined ? { max } : {}),
+			...(step !== undefined ? { step } : {}),
+		};
+	}
+
+	protected _handleNativeInput(_event: Event): void {
+		const event = _event as Event;
+		const target = event.target;
+		if (!(target instanceof HTMLInputElement) || target.type !== 'number') {
+			return;
+		}
+
+		this._numberInput = target;
+		const payload = this._buildEventPayload();
+		this._fireEvent('input', payload);
+		this._dispatchEvent('kt.input-number.input', payload);
+	}
+
+	protected _handleNativeChange(_event: Event): void {
+		const event = _event as Event;
+		const target = event.target;
+		if (!(target instanceof HTMLInputElement) || target.type !== 'number') {
+			return;
+		}
+
+		this._numberInput = target;
+		const payload = this._buildEventPayload();
+		this._fireEvent('change', payload);
+		this._dispatchEvent('kt.input-number.change', payload);
+	}
+
+	public getNumberInput(): HTMLInputElement | null {
+		return this._numberInput;
+	}
+
+	public getValue(): number | null {
+		return this._getCurrentNumericValue();
+	}
+
+	public override dispose(): void {
+		if (this._element) {
+			if (this._onNativeInput) {
+				this._element.removeEventListener('input', this._onNativeInput);
+			}
+			if (this._onNativeChange) {
+				this._element.removeEventListener('change', this._onNativeChange);
+			}
+		}
+		if (this._decrementElement && this._onDecrementClick) {
+			this._decrementElement.removeEventListener(
+				'click',
+				this._onDecrementClick,
+			);
+		}
+		if (this._incrementElement && this._onIncrementClick) {
+			this._incrementElement.removeEventListener(
+				'click',
+				this._onIncrementClick,
+			);
+		}
+		this._onNativeInput = null;
+		this._onNativeChange = null;
+		this._onDecrementClick = null;
+		this._onIncrementClick = null;
+		this._decrementElement = null;
+		this._incrementElement = null;
+		this._numberInput = null;
+		super.dispose();
+	}
+
+	public static getInstance(element: HTMLElement): KTInputNumber | null {
+		if (!element) {
+			return null;
+		}
+		if (KTData.has(element, 'input-number')) {
+			return KTData.get(element, 'input-number') as KTInputNumber;
+		}
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTInputNumberConfigInterface,
+	): KTInputNumber | null {
+		const existing = this.getInstance(element);
+		if (existing) {
+			return existing;
+		}
+		if (!this.findNumberInput(element)) {
+			return null;
+		}
+		new KTInputNumber(element, config ?? undefined);
+		return this.getInstance(element);
+	}
+
+	public static createInstances(): void {
+		document
+			.querySelectorAll<HTMLElement>('[data-kt-input-number]')
+			.forEach((el) => {
+				if (el.getAttribute('data-kt-input-number-lazy') === 'true') {
+					return;
+				}
+				new KTInputNumber(el);
+			});
+	}
+
+	public static init(): void {
+		KTInputNumber.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTInputNumber = KTInputNumber;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+export interface KTInputNumberConfigInterface {
+	/** Reserved for future options merged from data attributes. */
+	[key: string]: string | number | boolean | undefined;
+}
+
+export interface KTInputNumberEventPayloadInterface {
+	/** Parsed numeric value, or `null` when the input is empty or not a finite number. */
+	value: number | null;
+	/** Raw `value` attribute string of the controlled input. */
+	valueAsString: string;
+	/** Effective minimum when set on the input. */
+	min?: number;
+	/** Effective maximum when set on the input. */
+	max?: number;
+	/** Effective step when numeric; omitted when `step="any"` or missing. */
+	step?: number;
+}
+
+export interface KTInputNumberInterface {
+	getNumberInput(): HTMLInputElement | null;
+	getValue(): number | null;
+	getOption(name: string): unknown;
+	getElement(): HTMLElement | null;
+	on(eventType: string, callback: CallableFunction): string;
+	off(eventType: string, eventId: string): void;
+	dispose(): void;
+}

package/src/components/select/__tests__/ux-behaviors.test.ts

@@ -1279,4 +1279,76 @@ describe('KTSelect UX Behaviors', () => {
 			expect(dropdownOption?.getAttribute('aria-selected')).toBe('true');
 		});
 	});
+
+	describe('getValue()', () => {
+		it('returns null for single-select with no explicit selection after clear', async () => {
+			const selectEl = createSelectElement([
+				{ value: '1', text: 'Option 1' },
+				{ value: '2', text: 'Option 2' },
+			]);
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, { height: 250 });
+			await waitForInit(select);
+
+			const option1 = selectEl.querySelector(
+				'option[value="1"]',
+			) as HTMLOptionElement;
+			select.setSelectedOptions([option1]);
+			await waitFor(50);
+			select.setSelectedOptions([]);
+			await waitFor(50);
+
+			expect(select.getValue()).toBe(null);
+			expect(select.getSelectedOptions()).toEqual([]);
+		});
+
+		it('returns the selected value for single-select', async () => {
+			const selectEl = createSelectElement([
+				{ value: '1', text: 'Option 1' },
+				{ value: '2', text: 'Option 2' },
+			]);
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, { height: 250 });
+			await waitForInit(select);
+
+			const option2 = selectEl.querySelector(
+				'option[value="2"]',
+			) as HTMLOptionElement;
+			select.setSelectedOptions([option2]);
+			await waitFor(50);
+
+			expect(select.getValue()).toBe('2');
+			expect(select.getSelectedOptions()).toEqual(['2']);
+		});
+
+		it('returns null for multiple-select even when options are selected', async () => {
+			const selectEl = createSelectElement([
+				{ value: 'a', text: 'A' },
+				{ value: 'b', text: 'B' },
+			]);
+			selectEl.setAttribute('multiple', 'multiple');
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, {
+				multiple: true,
+				height: 250,
+			});
+			await waitForInit(select);
+
+			const optionA = selectEl.querySelector(
+				'option[value="a"]',
+			) as HTMLOptionElement;
+			const optionB = selectEl.querySelector(
+				'option[value="b"]',
+			) as HTMLOptionElement;
+			select.setSelectedOptions([optionA, optionB]);
+			await waitFor(50);
+
+			expect(select.getValue()).toBe(null);
+			expect(select.getSelectedOptions()).toContain('a');
+			expect(select.getSelectedOptions()).toContain('b');
+		});
+	});
 });

package/src/components/select/config.ts

@@ -59,7 +59,8 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	selectAllText: 'Select all', // Text for the "Select All" option (if implemented)
 	clearAllText: 'Clear all', // Text for the "Clear All" option (if implemented)
 	enableSelectAll: false, // Enable/disable "Select All" button for multi-select
-	showSelectedCount: true, // Show the number of selected options in multi-select mode
+	showSelectedCount: false, // Tags mode: show "N selected" before chips when true
+	selectedCountText: '{{count}} selected', // Tags mode; use {{count}} placeholder
 	renderSelected: undefined, // Custom function to render the selected value(s) in the display area
 
 	// Accessibility & Usability
@@ -112,6 +113,7 @@ export interface KTSelectConfigInterface {
 	clearAllText?: string;
 	enableSelectAll?: boolean;
 	showSelectedCount?: boolean;
+	selectedCountText?: string;
 	renderSelected?: (selectedOptions: string[]) => string;
 
 	// Accessibility & Usability

package/src/components/select/select.css

@@ -137,34 +137,37 @@
 
 	/* Enhanced Tag Styles */
 	.kt-select-tag {
-		@apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium;
-		@apply bg-accent/10 text-accent-foreground border border-border;
+		@apply inline-flex items-center gap-1 px-2 py-1 rounded-none text-xs font-medium leading-tight;
+		@apply bg-accent/10 text-accent-foreground border-[0.5px] border-border/80;
 		@apply max-w-[200px] truncate flex-shrink-0;
-		@apply shadow-sm;
-		@apply leading-tight;
 	}
 
 	.kt-select-tag-remove {
-		@apply flex items-center justify-center w-5 h-5 rounded-full;
+		@apply flex items-center justify-center size-4 rounded-full;
+		@apply border-0 bg-transparent p-0 shadow-none;
 		@apply hover:bg-accent/20 text-muted-foreground hover:text-accent-foreground;
-		@apply transition-all duration-200 cursor-pointer;
+		@apply transition-[color,background-color,transform] duration-200 cursor-pointer;
 		@apply flex-shrink-0 opacity-100;
-		@apply hover:scale-110;
+		@apply hover:scale-105;
 	}
 
 	.kt-select-tag-remove svg {
-		@apply w-3.5 h-3.5;
+		@apply size-3;
 		@apply transition-transform duration-200;
 	}
 
 	.kt-select-tag-remove:hover svg {
-		@apply scale-110;
+		@apply scale-105;
+	}
+
+	.kt-select-selected-count {
+		@apply inline-flex items-center text-xs font-medium leading-tight text-muted-foreground flex-shrink-0;
 	}
 
 	/* Enhanced Multi-select display container */
 	.kt-select-display[data-multiple='true'] {
-		@apply flex flex-wrap items-center gap-2 p-3 min-h-[3rem];
-		@apply w-full;
+		@apply flex flex-wrap items-center gap-1;
+		@apply w-full min-h-0;
 		@apply bg-background border border-input rounded-md;
 		@apply focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20;
 		@apply transition-all duration-200;
@@ -178,8 +181,8 @@
 		background-position: right 0.5rem center;
 
 		&[data-multiple='true'] {
-			@apply h-auto min-h-8.5 py-1.5 flex-wrap;
-			background-position: right 0.5rem top 0.675rem;
+			@apply h-auto min-h-8.5 py-0 flex-wrap;
+			background-position: right 0.5rem center;
 		}
 	}
 
@@ -188,8 +191,8 @@
 		background-position: right 0.5rem center;
 
 		&[data-multiple='true'] {
-			@apply h-auto min-h-7;
-			background-position: right 0.5rem top 0.575rem;
+			@apply h-auto min-h-7 py-0 flex-wrap;
+			background-position: right 0.5rem center;
 		}
 	}
 
@@ -198,8 +201,8 @@
 		background-position: right 0.6rem center;
 
 		&[data-multiple='true'] {
-			@apply h-auto min-h-10 py-2;
-			background-position: right 0.6rem top 0.85rem;
+			@apply h-auto min-h-10 py-0 flex-wrap;
+			background-position: right 0.6rem center;
 		}
 	}
 }
@@ -211,7 +214,7 @@
 			background-position: left 0.5rem center;
 
 			&[data-multiple='true'] {
-				background-position: left 0.5rem top 0.675rem;
+				background-position: left 0.5rem center;
 			}
 		}
 
@@ -219,7 +222,7 @@
 			background-position: left 0.5rem center;
 
 			&[data-multiple='true'] {
-				background-position: left 0.5rem top 0.575rem;
+				background-position: left 0.5rem center;
 			}
 		}
 
@@ -227,7 +230,7 @@
 			background-position: left 0.75rem center;
 
 			&[data-multiple='true'] {
-				background-position: left 0.75rem top 0.85rem;
+				background-position: left 0.75rem center;
 			}
 		}
 	}

package/src/components/select/select.ts

@@ -1627,12 +1627,26 @@ export class KTSelect extends KTComponent {
 	}
 
 	/**
-	 * Get selected options
+	 * Returns the current selection as **option value** strings (not labels, not DOM nodes).
+	 * For single-select, the array has zero or one entry; use {@link getValue} for a scalar.
+	 * For multiple-select, the array may contain multiple values in arbitrary order.
 	 */
 	public getSelectedOptions() {
 		return this._state.getSelectedOptions();
 	}
 
+	/**
+	 * Returns the selected option **value** for single-select, or `null` when nothing is selected.
+	 * When the select is configured with `multiple: true`, always returns `null` — use {@link getSelectedOptions} instead.
+	 */
+	public getValue(): string | null {
+		if (this._config.multiple) {
+			return null;
+		}
+		const values = this._state.getSelectedOptions();
+		return values.length > 0 ? values[0] : null;
+	}
+
 	/**
 	 * Get configuration
 	 */

package/src/components/select/tags.ts

@@ -6,7 +6,7 @@
 import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
 import { defaultTemplates } from './templates';
-import { EventManager } from './utils';
+import { EventManager, renderTemplateString } from './utils';
 
 /**
  * KTSelectTags - Handles tags-specific functionality for KTSelect
@@ -50,6 +50,19 @@ export class KTSelectTags {
 		// Clear all existing content before adding tags
 		valueDisplayElement.innerHTML = '';
 
+		// Optional summary count (config exists for tags mode; non-tag display uses templates instead)
+		if (this._config.showSelectedCount && selectedOptions.length > 0) {
+			const countEl = document.createElement('span');
+			countEl.setAttribute('data-kt-select-selected-count', 'true');
+			countEl.className = 'kt-select-selected-count';
+			countEl.setAttribute('aria-live', 'polite');
+			countEl.textContent = renderTemplateString(
+				this._config.selectedCountText ?? '{{count}} selected',
+				{ count: selectedOptions.length },
+			);
+			valueDisplayElement.appendChild(countEl);
+		}
+
 		// Insert each tag before the display element
 		selectedOptions.forEach((optionValue) => {
 			// Find the original option element (in dropdown or select)

package/src/index.ts

@@ -34,6 +34,7 @@ import { KTRepeater } from './components/repeater';
 import { KTClipboard } from './components/clipboard';
 import { KTRangeSlider } from './components/range-slider';
 import { KTPinInput } from './components/pin-input';
+import { KTInputNumber } from './components/input-number';
 import { KTCarousel } from './components/carousel';
 
 export { KTDropdown } from './components/dropdown';
@@ -63,6 +64,7 @@ export { KTRepeater } from './components/repeater';
 export { KTClipboard } from './components/clipboard';
 export { KTRangeSlider } from './components/range-slider';
 export { KTPinInput } from './components/pin-input';
+export { KTInputNumber } from './components/input-number';
 export { KTCarousel } from './components/carousel';
 
 export type {
@@ -85,6 +87,11 @@ export type {
 	KTDataTableCheckConfigInterface,
 	KTDataTableCheckInterface,
 	KTDataTableCheckChangePayloadInterface,
+	KTDataTableLockedRowsConfigInterface,
+	KTDataTableLockedColumnsConfigInterface,
+	KTDataTableLockedLayoutConfigInterface,
+	KTDataTableLayoutPluginContextInterface,
+	KTDataTableLayoutPluginInterface,
 } from './components/datatable';
 export type {
 	KTDismissConfigInterface,
@@ -137,6 +144,11 @@ export type {
 	KTPinInputEventPayloadInterface,
 	KTPinInputInterface,
 } from './components/pin-input';
+export type {
+	KTInputNumberConfigInterface,
+	KTInputNumberEventPayloadInterface,
+	KTInputNumberInterface,
+} from './components/input-number';
 export type {
 	KTCarouselConfigInterface,
 	KTCarouselChangePayloadInterface,
@@ -217,6 +229,7 @@ export const KTComponents = {
 		KTClipboard.init();
 		KTRangeSlider.init();
 		KTPinInput.init();
+		KTInputNumber.init();
 		KTCarousel.init();
 	},
 };
@@ -254,6 +267,7 @@ declare global {
 		KTClipboard: typeof KTClipboard;
 		KTRangeSlider: typeof KTRangeSlider;
 		KTPinInput: typeof KTPinInput;
+		KTInputNumber: typeof KTInputNumber;
 		KTCarousel: typeof KTCarousel;
 		KTComponents: typeof KTComponents;
 	}