@keenthemes/ktui 1.0.19 → 1.0.20

package/src/components/select/search.ts

@@ -143,6 +143,7 @@ export class KTSelectSearch {
 							this._searchInput?.focus(); // Focus search input
 						}, 50); // Delay to ensure dropdown is visible
 					}
+					this._select.updateSelectAllButtonState();
 				});
 			}
 		}
@@ -164,6 +165,11 @@ export class KTSelectSearch {
 		const key = event.key;
 
 		switch (key) {
+			case ' ': // Spacebar
+				// Do nothing, allow space to be typed into the input
+				// Stop propagation to prevent parent handlers from processing this event
+				event.stopPropagation();
+				break;
 			case 'ArrowDown':
 				event.preventDefault();
 				this._focusManager.focusNext();
@@ -292,6 +298,8 @@ export class KTSelectSearch {
 		const visibleCount = filterOptions(options, query, config, dropdownElement, (count) =>
 			this._handleNoResults(count),
 		);
+
+		this._select.updateSelectAllButtonState();
 	}
 
 	/**
@@ -324,6 +332,7 @@ export class KTSelectSearch {
 		});
 
 		this._clearNoResultsMessage(); // Ensure no results message is cleared when resetting
+		this._select.updateSelectAllButtonState();
 	}
 
 	private _handleNoResults(visibleOptionsCount: number) {

package/src/components/select/select.css

@@ -29,7 +29,7 @@
 		&:-moz-focusring {
 			color: transparent;
 			text-shadow: none;
-		}	
+		}
 
 		&.active {
 			@apply ring-ring/30 border-ring outline-none ring-[3px];
@@ -54,7 +54,7 @@
 
 	.kt-select-search {
 		@apply px-4 py-1 border-b border-border;
-		
+
 		.kt-input {
 			@apply text-sm;
 		}
@@ -68,6 +68,14 @@
 		@apply rounded-md shadow-md shadow-[rgba(0,0,0,0.05)] border border-border bg-popover text-popover-foreground;
 	}
 
+	.kt-select-select-all {
+		@apply px-2 py-1 border-b border-border;
+	}
+
+	.kt-select-select-all-button {
+		@apply w-full text-start p-1.5 rounded-md text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer;
+	}
+
 	.kt-select-options {
 		@apply p-1 space-y-0.5;
 	}
@@ -98,7 +106,7 @@
 		}
 	}
 
-	.kt-select-option-text {	
+	.kt-select-option-text {
 		@apply overflow-ellipsis truncate;
 	}
 
@@ -153,7 +161,7 @@
 }
 
 /* RTL */
-@layer components {	
+@layer components {
 	[dir='rtl'] {
 		.kt-select {
 			background-position: left 0.5rem center;
@@ -162,7 +170,7 @@
 				background-position: left 0.5rem top 0.675rem;
 			}
 		}
-	
+
 		.kt-select-sm {
 			background-position: left 0.5rem center;
 
@@ -171,7 +179,7 @@
 			}
 		}
 
-		.kt-select-lg {	
+		.kt-select-lg {
 			background-position: left 0.75rem center;
 
 			&[data-multiple=true] {

package/src/components/select/select.ts

@@ -48,6 +48,8 @@ export class KTSelect extends KTComponent {
 	private _tagsModule: KTSelectTags | null = null;
 	private _dropdownModule: KTSelectDropdown | null = null;
 	private _loadMoreIndicator: HTMLElement | null = null;
+	private _selectAllButton: HTMLElement | null = null;
+	private _selectAllButtonToggle: HTMLButtonElement | null = null;
 	private _focusManager: FocusManager;
 	private _eventManager: EventManager;
 	private _typeToSearchBuffer: TypeToSearchBuffer = new TypeToSearchBuffer();
@@ -405,6 +407,12 @@ export class KTSelect extends KTComponent {
 		this.updateSelectedOptionDisplay();
 		this._setAriaAttributes();
 
+		// Update select all button state
+		this.updateSelectAllButtonState();
+
+		// Focus the first selected option or first option if nothing selected
+		this._focusSelectedOption();
+
 		// Attach event listeners after all modules are initialized
 		this._attachEventListeners();
 
@@ -460,6 +468,12 @@ export class KTSelect extends KTComponent {
 			dropdownElement.appendChild(searchElement);
 		}
 
+		// Add select all button if needed
+		if (this._config.multiple && this._config.enableSelectAll) {
+			const selectAllElement = defaultTemplates.selectAll(this._config);
+			dropdownElement.appendChild(selectAllElement);
+		}
+
 		// Create options container using template
 		const optionsContainer = defaultTemplates.options(this._config);
 
@@ -524,6 +538,10 @@ export class KTSelect extends KTComponent {
 			this._searchInputElement = this._displayElement as HTMLInputElement;
 		}
 
+		this._selectAllButton = this._wrapperElement.querySelector(
+			'[data-kt-select-select-all]',
+		) as HTMLElement;
+
 		this._options = this._wrapperElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		) as NodeListOf<HTMLElement>;
@@ -543,6 +561,17 @@ export class KTSelect extends KTComponent {
 			this._handleDropdownOptionClick.bind(this),
 		);
 
+		if (this._selectAllButton) {
+			this._selectAllButtonToggle = this._selectAllButton.querySelector('button');
+			if (this._selectAllButtonToggle) {
+				this._eventManager.addListener(
+					this._selectAllButtonToggle,
+					'click',
+					this._handleSelectAllClick.bind(this),
+				);
+			}
+		}
+
 		// Attach centralized keyboard handler to the wrapper element.
 		// Events from focusable children like _displayElement or _searchInputElement (if present) will bubble up.
 		if (this._wrapperElement) {
@@ -752,6 +781,9 @@ export class KTSelect extends KTComponent {
 		// Update ARIA states
 		this._setAriaAttributes();
 
+		// Update select all button state
+		this.updateSelectAllButtonState();
+
 		// Focus the first selected option or first option if nothing selected
 		this._focusSelectedOption();
 	}
@@ -1013,6 +1045,9 @@ export class KTSelect extends KTComponent {
 		this.updateSelectedOptionDisplay();
 		this._updateSelectedOptionClass();
 
+		// Update select all button state
+		this.updateSelectAllButtonState();
+
 		// Dispatch change event
 		this._dispatchEvent('change');
 		this._fireEvent('change');
@@ -1328,6 +1363,7 @@ export class KTSelect extends KTComponent {
 			if (this._config.debug)
 				console.log('Multiple select mode - keeping dropdown open for additional selections');
 			// Don't close dropdown in multiple select mode to allow multiple selections
+			this.updateSelectAllButtonState();
 		}
 
 		// Dispatch custom change event with additional data
@@ -1458,6 +1494,7 @@ export class KTSelect extends KTComponent {
 							if (this._searchModule) {
 								this._searchModule.refreshAfterSearch();
 							}
+							this.updateSelectAllButtonState();
 						})
 						.catch((error) => {
 							console.error('Error updating search results:', error);
@@ -1799,5 +1836,70 @@ export class KTSelect extends KTComponent {
 		this._state.setSelectedOptions(this._config.multiple ? selected : selected[0] || '');
 		this.updateSelectedOptionDisplay();
 		this._updateSelectedOptionClass();
+		this.updateSelectAllButtonState();
+	}
+
+	private _handleSelectAllClick(event: Event): void {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const visibleOptions = this._focusManager
+			.getVisibleOptions()
+			.filter((opt) => opt.getAttribute('aria-disabled') !== 'true');
+		if (visibleOptions.length === 0) return;
+
+		const visibleValues = visibleOptions.map(
+			(opt) => opt.dataset.value as string,
+		);
+		const selectedValues = new Set(this.getSelectedOptions());
+		const isAllSelected = visibleOptions.every((opt) =>
+			selectedValues.has(opt.dataset.value as string),
+		);
+
+		if (isAllSelected) {
+			// Deselect all visible
+			visibleValues.forEach((value) => selectedValues.delete(value));
+		} else {
+			// Select all visible
+			visibleValues.forEach((value) => selectedValues.add(value));
+		}
+
+		this._state.setSelectedOptions(Array.from(selectedValues));
+		this.updateSelectedOptionDisplay();
+		this._updateSelectedOptionClass();
+		this.updateSelectAllButtonState();
+
+		this._dispatchEvent('change');
+		this._fireEvent('change');
+	}
+
+	public updateSelectAllButtonState(): void {
+		if (
+			!this._config.multiple ||
+			!this._config.enableSelectAll ||
+			!this._selectAllButtonToggle
+		) {
+			return;
+		}
+
+		const visibleOptions = this._focusManager
+			.getVisibleOptions()
+			.filter((opt) => opt.getAttribute('aria-disabled') !== 'true');
+
+		if (visibleOptions.length === 0) {
+			this._selectAllButton.style.display = 'none';
+			return;
+		}
+
+		this._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;
 	}
 }

package/src/components/select/templates.ts

@@ -43,6 +43,7 @@ export const coreTemplateStrings = {
 	loading: `<li class="kt-select-loading {{class}}" role="status" aria-live="polite"></li>`,
 	tag: `<div data-kt-select-tag="true" class="kt-select-tag {{class}}"></div>`,
 	loadMore: `<li class="kt-select-load-more {{class}}" data-kt-select-load-more="true"></li>`,
+	selectAll: `<div data-kt-select-select-all class="kt-select-select-all"><button type="button" class="kt-select-select-all-button">{{text}}</button></div>`,
 	tagRemoveButton: `<button type="button" data-kt-select-remove-button class="kt-select-tag-remove" aria-label="Remove tag" tabindex="0"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="9" y2="9"/><line x1="9" y1="3" x2="3" y2="9"/></svg></button>`,
 };
 
@@ -99,6 +100,7 @@ export interface KTSelectTemplateInterface {
 	) => HTMLElement;
 
 	placeholder: (config: KTSelectConfigInterface) => HTMLElement;
+	selectAll: (config: KTSelectConfigInterface) => HTMLElement;
 }
 
 /**
@@ -462,4 +464,15 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 			return element;
 		}
 	},
+
+	selectAll: (config: KTSelectConfigInterface): HTMLElement => {
+		const template = getTemplateStrings(config).selectAll;
+		const element = stringToElement(
+			template.replace(
+				'{{text}}',
+				config.selectAllText || 'Select All',
+			),
+		);
+		return element;
+	},
 };

package/src/components/stepper/stepper.ts

@@ -131,12 +131,12 @@ export class KTStepper extends KTComponent implements KTStepperInterface {
 		return elements;
 	}
 
-	protected _go(step: number): void {
+	protected async _go(step: number): Promise<void> {
 		if (step === this._activeStep || step > this._getTotalSteps() || step < 0)
 			return;
 
 		const payload = { step: step, cancel: false };
-		this._fireEvent('change', payload);
+		await this._fireEvent('change', payload);
 		this._dispatchEvent('change', payload);
 		if (payload.cancel === true) {
 			return;