inviton-powerduck 0.0.226 → 0.0.228

package/components/dropdown/css/smart-dropdown.scss

@@ -237,6 +237,15 @@
         min-height: 150px;
     }
 
+    .list-header {
+        padding: 12px 16px;
+        font-size: 0.85rem;
+        color: #6c757d;
+        background: #f8f9fa;
+        border-bottom: 1px solid #e9ecef;
+        font-style: italic;
+    }
+
     .list-group-label {
         padding: 8px 16px;
         font-size: 0.75rem;

package/components/dropdown/smart-dropdown.tsx

@@ -81,6 +81,10 @@ interface SmartDropdownArgs extends FormItemWrapperArgs {
 	changed: (e: SmartDropdownItem[]) => void;
 	/** Called when an item is clicked. Return true to prevent default selection behavior. */
 	onItemClick?: (item: SmartDropdownItem) => boolean;
+	/** Delay in ms before showing the loading indicator. Default 650ms. */
+	loadingIndicatorDelay?: number;
+	/** Optional header shown at the top of the list to guide users. Can be a string or VNode. */
+	listHeader?: string | VNode;
 }
 
 @Component
@@ -121,13 +125,17 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 	@Prop({ type: Function }) readonly customTriggerRender?: () => VNode;
 	@Prop() readonly changed: (e: SmartDropdownItem[]) => void;
 	@Prop({ type: Function }) readonly onItemClick?: (item: SmartDropdownItem) => boolean;
+	@Prop({ type: Number, default: 650 }) readonly loadingIndicatorDelay!: number;
+	@Prop() readonly listHeader?: string | VNode;
 
 	// --- State ---
 	isOpen = false;
 	searchQuery = '';
 	searchResults: SmartDropdownSearchResultItem[] = [];
 	isLoading = false;
+	isSearchPending = false;
 	debounceTimer: number | null = null;
+	loadingIndicatorTimer: number | null = null;
 	focusedIndex = -1;
 	triggerInputValue = '';
 
@@ -415,20 +423,36 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 			clearTimeout(this.debounceTimer);
 		}
 
+		if (this.loadingIndicatorTimer) {
+			clearTimeout(this.loadingIndicatorTimer);
+			this.loadingIndicatorTimer = null;
+		}
+
 		if (val.trim().length === 0) {
 			this.isLoading = false;
+			this.isSearchPending = false;
 			this.searchResults = [];
 			return;
 		}
 
-		this.isLoading = true;
+		this.isSearchPending = true;
 		this.debounceTimer = window.setTimeout(async () => {
+			// Start timer to show loading indicator after delay
+			this.loadingIndicatorTimer = window.setTimeout(() => {
+				this.isLoading = true;
+			}, this.loadingIndicatorDelay);
 			try {
 				this.searchResults = await this.searchData(val);
 			} catch (err) {
 				this.searchResults = [];
 			} finally {
+				if (this.loadingIndicatorTimer) {
+					clearTimeout(this.loadingIndicatorTimer);
+					this.loadingIndicatorTimer = null;
+				}
+
 				this.isLoading = false;
+				this.isSearchPending = false;
 			}
 		}, 800);
 	}
@@ -449,7 +473,10 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 		if (this.multiselect) {
 			if (shouldBeSelected && !isCurrentlySelected) {
 				// Add item
-				newSelection = [...this.value, item];
+				newSelection = [
+					...this.value,
+					item,
+				];
 			} else if (!shouldBeSelected && isCurrentlySelected) {
 				// Remove item
 				newSelection = this.value.filter(i => i.id !== item.id);
@@ -576,6 +603,11 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 		// A. Search Results
 		if (this.isSearchActive) {
 			if (this.searchResults.length === 0) {
+				// Show loading if search is pending or in progress, otherwise show no results
+				if (this.isSearchPending) {
+					return <div class="loading-state" role="status">{SmartDropdownResources.loadingTextLong}</div>;
+				}
+
 				return <div class="empty-state" role="status">{SmartDropdownResources.noResultsSearch}</div>;
 			}
 
@@ -597,6 +629,11 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 
 		return (
 			<div class="list-wrapper">
+				{/* 0. List Header */}
+				{this.listHeader && (
+					<div class="list-header" role="note">{this.listHeader}</div>
+				)}
+
 				{/* 1. Pinned Selected */}
 				{hasPinned && (
 					<div class="list-group section-pinned" role="group" aria-label={SmartDropdownResources.selectedTitle}>

package/components/input/checkbox.tsx

@@ -122,7 +122,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<label class="form-check-label">
 					<input class="form-check-input" type="checkbox" checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<span class="form-check-sign"></span>
-					{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : this.checkboxLabelHtml}
+					{this.getCustomRenderedLabel(h) ?? this.checkboxLabelHtml}
 				</label>
 			</div>
 		);
@@ -140,7 +140,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<div class="inv-cbrb-inner">
 					<input class="inv-chckb-clickable" type="checkbox" id={`iei-input-${this.uuid}`} checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<label class="inv-chckb-clickable form-check-label " for={`iei-input-${this.uuid}`}>
-						{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
+						{this.getCustomRenderedLabel(h) ?? <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
 					</label>
 				</div>
 			</div>
@@ -160,7 +160,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<div class="inv-cbrb-inner">
 					<input class="inv-chckb-clickable" type="checkbox" id={`iei-input-${this.uuid}`} checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<label class="inv-chckb-clickable form-check-label " for={`iei-input-${this.uuid}`}>
-						{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
+						{this.getCustomRenderedLabel(h) ?? <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
 					</label>
 				</div>
 			</div>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.226",
+	"version": "0.0.228",
 	"files": [
 		"app/",
 		"common/",