ngx-com 0.1.2 → 0.1.4

package/fesm2022/ngx-com-components-dropdown.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, output, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, signal, TemplateRef, Directive, ElementRef, ViewContainerRef, contentChild, model, linkedSignal, forwardRef } from '@angular/core';
+import { viewChild, input, output, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, signal, TemplateRef, Directive, ElementRef, ViewContainerRef, contentChild, model, linkedSignal, effect, forwardRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
 import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
@@ -10,9 +10,10 @@ import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf }
 import { TemplatePortal } from '@angular/cdk/portal';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { cva } from 'class-variance-authority';
-import { mergeClasses } from 'ngx-com/utils';
+import { mergeClasses, throttle } from 'ngx-com/utils';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { ComSpinner } from 'ngx-com/components/spinner';
 
 /**
  * CVA variants for the dropdown trigger button.
@@ -437,6 +438,28 @@ const dropdownChevronVariants = cva([
         open: false,
     },
 });
+/**
+ * CVA variants for the loading indicator container.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const dropdownLoadingVariants = cva([
+    'flex',
+    'items-center',
+    'justify-center',
+    'text-muted-foreground',
+], {
+    variants: {
+        size: {
+            sm: ['px-2', 'py-3', 'text-xs'],
+            default: ['px-3', 'py-3', 'text-sm'],
+            lg: ['px-4', 'py-4', 'text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
 
 /**
  * A single option in the dropdown list.
@@ -1282,6 +1305,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * Directive to mark a template as the custom loading indicator template.
+ *
+ * @tokens none
+ *
+ * @example
+ * ```html
+ * <com-dropdown [options]="users()" [loading]="isLoading()">
+ *   <ng-template comDropdownLoading>
+ *     <div class="flex items-center gap-2 p-3">
+ *       <com-spinner size="xs" color="primary" />
+ *       <span class="text-sm text-muted-foreground">Fetching more results...</span>
+ *     </div>
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+class ComDropdownLoadingTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownLoadingTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDropdownLoadingTpl, isStandalone: true, selector: "ng-template[comDropdownLoading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownLoadingTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comDropdownLoading]',
+                }]
+        }] });
+
 /**
  * Default compare function for primitive values.
  * @param a First value.
@@ -1392,6 +1445,8 @@ class ComDropdown {
     groupTemplate = contentChild(ComDropdownGroupTpl, ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
     /** Content query for custom tag template. */
     tagTemplate = contentChild(ComDropdownTagTpl, ...(ngDevMode ? [{ debugName: "tagTemplate" }] : []));
+    /** Content query for custom loading template. */
+    loadingTemplate = contentChild(ComDropdownLoadingTpl, ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : []));
     /** Overlay reference. */
     overlayRef = null;
     /** Unique ID for the dropdown. */
@@ -1447,6 +1502,8 @@ class ComDropdown {
     maxVisibleTags = input(2, ...(ngDevMode ? [{ debugName: "maxVisibleTags" }] : []));
     /** Custom error state matcher for determining when to show errors. */
     errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    /** Whether the dropdown is currently loading data. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     // Signal Forms inputs — set automatically by [formField] via setInputOnDirectives
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
@@ -1458,6 +1515,8 @@ class ComDropdown {
     opened = output();
     /** Emitted when panel closes. */
     closed = output();
+    /** Emitted when user scrolls near the bottom of the option list. */
+    loadMore = output();
     // ============ INTERNAL STATE ============
     /** Whether the panel is open. */
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -1471,6 +1530,12 @@ class ComDropdown {
     internalValue = linkedSignal(() => this.value() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
     /** Live announcements for screen readers. */
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** Flag to prevent duplicate loadMore emissions per scroll-to-bottom. */
+    loadMoreEmitted = false;
+    /** Subscription for virtual scroll elementScrolled. */
+    scrollSubscription = null;
+    /** Throttled handler for standard scroll events. */
+    throttledScrollHandler = null;
     /** IDs for aria-describedby (set by form-field). */
     _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
     /** Form field appearance (set by form-field). */
@@ -1655,6 +1720,10 @@ class ComDropdown {
     overflowBadgeClasses = computed(() => {
         return dropdownOverflowBadgeVariants({ size: this.size() });
     }, ...(ngDevMode ? [{ debugName: "overflowBadgeClasses" }] : []));
+    /** Computed loading container classes. */
+    loadingContainerClasses = computed(() => {
+        return dropdownLoadingVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "loadingContainerClasses" }] : []));
     // ============ CVA CALLBACKS ============
     onChange = () => { };
     onTouched = () => { };
@@ -1662,6 +1731,11 @@ class ComDropdown {
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
+        // Reset loadMoreEmitted when options change (new data arrived)
+        effect(() => {
+            this.options(); // track
+            this.loadMoreEmitted = false;
+        });
     }
     // ============ CVA IMPLEMENTATION ============
     writeValue(value) {
@@ -1727,12 +1801,15 @@ class ComDropdown {
         }
         // Announce opening
         this.announce(`${this.placeholder()} dropdown opened, ${this.filteredOptions().length} options available`);
+        // Set up scroll detection for loadMore
+        this.setupScrollDetection();
     }
     /** Closes the dropdown panel. */
     close() {
         if (!this.isOpen()) {
             return;
         }
+        this.cleanupScrollDetection();
         this.destroyOverlay();
         this.isOpen.set(false);
         this.searchQuery.set('');
@@ -2102,8 +2179,67 @@ class ComDropdown {
         this.liveAnnouncement.set(message);
         this.liveAnnouncer.announce(message, 'polite');
     }
+    /** Sets up scroll detection for the loadMore output. SSR-safe: only called from user interaction. */
+    setupScrollDetection() {
+        this.loadMoreEmitted = false;
+        this.cleanupScrollDetection();
+        const viewport = this.virtualViewport();
+        if (viewport) {
+            // Virtual scroll branch — use viewport's elementScrolled observable
+            this.scrollSubscription = viewport.elementScrolled()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                if (this.loading() || this.loadMoreEmitted)
+                    return;
+                const offset = viewport.measureScrollOffset('bottom');
+                if (offset < 50) {
+                    this.loadMoreEmitted = true;
+                    this.loadMore.emit();
+                }
+                else {
+                    // Reset flag when user scrolls back up
+                    this.loadMoreEmitted = false;
+                }
+            });
+        }
+        else {
+            // Standard scroll branch — throttled scroll event on the scroll container
+            const panelEl = this.overlayRef?.overlayElement;
+            const scrollContainer = panelEl?.querySelector('[data-scroll-container]');
+            if (!scrollContainer)
+                return;
+            this.throttledScrollHandler = throttle(() => {
+                if (this.loading() || this.loadMoreEmitted)
+                    return;
+                const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
+                if (scrollTop + clientHeight >= scrollHeight - 50) {
+                    this.loadMoreEmitted = true;
+                    this.loadMore.emit();
+                }
+                else {
+                    // Reset flag when user scrolls back up
+                    this.loadMoreEmitted = false;
+                }
+            }, 100);
+            scrollContainer.addEventListener('scroll', this.throttledScrollHandler, { passive: true });
+        }
+    }
+    /** Cleans up scroll detection listeners. */
+    cleanupScrollDetection() {
+        if (this.scrollSubscription) {
+            this.scrollSubscription.unsubscribe();
+            this.scrollSubscription = null;
+        }
+        if (this.throttledScrollHandler) {
+            const panelEl = this.overlayRef?.overlayElement;
+            const scrollContainer = panelEl?.querySelector('[data-scroll-container]');
+            scrollContainer?.removeEventListener('scroll', this.throttledScrollHandler);
+            this.throttledScrollHandler.cancel();
+            this.throttledScrollHandler = null;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdown, isStandalone: true, selector: "com-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceMs: { classPropertyName: "searchDebounceMs", publicName: "searchDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleTags: { classPropertyName: "maxVisibleTags", publicName: "maxVisibleTags", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", searchChange: "searchChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-dropdown-disabled": "disabled()", "class.com-dropdown-open": "isOpen()" }, classAttribute: "com-dropdown-host inline-block" }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComDropdown) }], queries: [{ propertyName: "optionTemplate", first: true, predicate: ComDropdownOptionTpl, descendants: true, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: ComDropdownSelectedTpl, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ComDropdownEmptyTpl, descendants: true, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ComDropdownGroupTpl, descendants: true, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: ComDropdownTagTpl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], exportAs: ["comDropdown"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdown, isStandalone: true, selector: "com-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceMs: { classPropertyName: "searchDebounceMs", publicName: "searchDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleTags: { classPropertyName: "maxVisibleTags", publicName: "maxVisibleTags", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", searchChange: "searchChange", opened: "opened", closed: "closed", loadMore: "loadMore" }, host: { properties: { "class.com-dropdown-disabled": "disabled()", "class.com-dropdown-open": "isOpen()" }, classAttribute: "com-dropdown-host inline-block" }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComDropdown) }], queries: [{ propertyName: "optionTemplate", first: true, predicate: ComDropdownOptionTpl, descendants: true, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: ComDropdownSelectedTpl, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ComDropdownEmptyTpl, descendants: true, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ComDropdownGroupTpl, descendants: true, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: ComDropdownTagTpl, descendants: true, isSignal: true }, { propertyName: "loadingTemplate", first: true, predicate: ComDropdownLoadingTpl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], exportAs: ["comDropdown"], ngImport: i0, template: `
     <!-- Trigger button -->
     <button
       #triggerElement
@@ -2251,11 +2387,23 @@ class ComDropdown {
               (hover)="onOptionHover(option.id)"
             />
           </cdk-virtual-scroll-viewport>
+
+          <!-- Loading indicator (virtual scroll) -->
+          @if (loading()) {
+            @if (loadingTemplate()) {
+              <ng-container [ngTemplateOutlet]="loadingTemplate()!.templateRef" />
+            } @else {
+              <div [class]="loadingContainerClasses()">
+                <com-spinner size="sm" color="muted" />
+              </div>
+            }
+          }
         } @else {
           <!-- Standard rendering for small lists and grouped options -->
           <div
             class="overflow-auto"
             [style.maxHeight]="maxHeight()"
+            data-scroll-container
           >
             @if (groupedOptions().length > 0) {
               @for (group of groupedOptions(); track group.key) {
@@ -2301,8 +2449,8 @@ class ComDropdown {
                   (hover)="onOptionHover(option.id)"
                 />
               }
-            } @else {
-              <!-- Empty state -->
+            } @else if (!loading()) {
+              <!-- Empty state (suppressed when loading) -->
               @if (emptyTemplate()) {
                 <ng-container
                   [ngTemplateOutlet]="emptyTemplate()!.templateRef"
@@ -2318,6 +2466,17 @@ class ComDropdown {
                 </div>
               }
             }
+
+            <!-- Loading indicator (standard) -->
+            @if (loading()) {
+              @if (loadingTemplate()) {
+                <ng-container [ngTemplateOutlet]="loadingTemplate()!.templateRef" />
+              } @else {
+                <div [class]="loadingContainerClasses()">
+                  <com-spinner size="sm" color="muted" />
+                </div>
+              }
+            }
           </div>
         }
       </div>
@@ -2327,7 +2486,7 @@ class ComDropdown {
     <div class="sr-only" aria-live="polite" aria-atomic="true">
       {{ liveAnnouncement() }}
     </div>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ComDropdownOption, selector: "com-dropdown-option", inputs: ["value", "displayText", "id", "index", "selected", "active", "disabled", "size", "optionTemplate", "class"], outputs: ["select", "hover"], exportAs: ["comDropdownOption"] }, { kind: "component", type: ComDropdownSearch, selector: "com-dropdown-search", inputs: ["placeholder", "ariaLabel", "disabled", "debounceMs", "size", "class"], outputs: ["searchChange", "keyNav"], exportAs: ["comDropdownSearch"] }, { kind: "component", type: ComDropdownTag, selector: "com-dropdown-tag", inputs: ["value", "displayText", "index", "disabled", "size", "variant", "class", "tagTemplate"], outputs: ["remove"], exportAs: ["comDropdownTag"] }, { kind: "component", type: ComDropdownGroup, selector: "com-dropdown-group", inputs: ["label", "count", "expanded", "showCount", "size", "class", "groupTemplate"], exportAs: ["comDropdownGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ComDropdownOption, selector: "com-dropdown-option", inputs: ["value", "displayText", "id", "index", "selected", "active", "disabled", "size", "optionTemplate", "class"], outputs: ["select", "hover"], exportAs: ["comDropdownOption"] }, { kind: "component", type: ComDropdownSearch, selector: "com-dropdown-search", inputs: ["placeholder", "ariaLabel", "disabled", "debounceMs", "size", "class"], outputs: ["searchChange", "keyNav"], exportAs: ["comDropdownSearch"] }, { kind: "component", type: ComDropdownTag, selector: "com-dropdown-tag", inputs: ["value", "displayText", "index", "disabled", "size", "variant", "class", "tagTemplate"], outputs: ["remove"], exportAs: ["comDropdownTag"] }, { kind: "component", type: ComDropdownGroup, selector: "com-dropdown-group", inputs: ["label", "count", "expanded", "showCount", "size", "class", "groupTemplate"], exportAs: ["comDropdownGroup"] }, { kind: "component", type: ComSpinner, selector: "com-spinner", inputs: ["label", "labelPosition", "size", "color"], exportAs: ["comSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdown, decorators: [{
             type: Component,
@@ -2479,11 +2638,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
               (hover)="onOptionHover(option.id)"
             />
           </cdk-virtual-scroll-viewport>
+
+          <!-- Loading indicator (virtual scroll) -->
+          @if (loading()) {
+            @if (loadingTemplate()) {
+              <ng-container [ngTemplateOutlet]="loadingTemplate()!.templateRef" />
+            } @else {
+              <div [class]="loadingContainerClasses()">
+                <com-spinner size="sm" color="muted" />
+              </div>
+            }
+          }
         } @else {
           <!-- Standard rendering for small lists and grouped options -->
           <div
             class="overflow-auto"
             [style.maxHeight]="maxHeight()"
+            data-scroll-container
           >
             @if (groupedOptions().length > 0) {
               @for (group of groupedOptions(); track group.key) {
@@ -2529,8 +2700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                   (hover)="onOptionHover(option.id)"
                 />
               }
-            } @else {
-              <!-- Empty state -->
+            } @else if (!loading()) {
+              <!-- Empty state (suppressed when loading) -->
               @if (emptyTemplate()) {
                 <ng-container
                   [ngTemplateOutlet]="emptyTemplate()!.templateRef"
@@ -2546,6 +2717,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 </div>
               }
             }
+
+            <!-- Loading indicator (standard) -->
+            @if (loading()) {
+              @if (loadingTemplate()) {
+                <ng-container [ngTemplateOutlet]="loadingTemplate()!.templateRef" />
+              } @else {
+                <div [class]="loadingContainerClasses()">
+                  <com-spinner size="sm" color="muted" />
+                </div>
+              }
+            }
           </div>
         }
       </div>
@@ -2565,12 +2747,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ComDropdownSearch,
                         ComDropdownTag,
                         ComDropdownGroup,
+                        ComSpinner,
                     ], providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComDropdown) }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'com-dropdown-host inline-block',
                         '[class.com-dropdown-disabled]': 'disabled()',
                         '[class.com-dropdown-open]': 'isOpen()',
                     }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], virtualViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownOptionTpl), { isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownSelectedTpl), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownEmptyTpl), { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownGroupTpl), { isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownTagTpl), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], filterWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterWith", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], searchDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceMs", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], maxVisibleTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleTags", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], virtualViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownOptionTpl), { isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownSelectedTpl), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownEmptyTpl), { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownGroupTpl), { isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownTagTpl), { isSignal: true }] }], loadingTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownLoadingTpl), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], filterWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterWith", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], searchDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceMs", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], maxVisibleTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleTags", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }] } });
 
 /**
  * The overlay panel containing the dropdown options.
@@ -2801,5 +2984,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ComDropdown, ComDropdownEmptyTpl, ComDropdownGroup, ComDropdownGroupTpl, ComDropdownOption, ComDropdownOptionTpl, ComDropdownPanel, ComDropdownSearch, ComDropdownSelectedTpl, ComDropdownTag, ComDropdownTagTpl, defaultCompareWith, defaultDisplayWith, defaultFilterWith, dropdownChevronVariants, dropdownClearVariants, dropdownEmptyVariants, dropdownGroupVariants, dropdownOptionVariants, dropdownOverflowBadgeVariants, dropdownPanelVariants, dropdownSearchVariants, dropdownTagRemoveVariants, dropdownTagVariants, dropdownTriggerVariants, generateDropdownId };
+export { ComDropdown, ComDropdownEmptyTpl, ComDropdownGroup, ComDropdownGroupTpl, ComDropdownLoadingTpl, ComDropdownOption, ComDropdownOptionTpl, ComDropdownPanel, ComDropdownSearch, ComDropdownSelectedTpl, ComDropdownTag, ComDropdownTagTpl, defaultCompareWith, defaultDisplayWith, defaultFilterWith, dropdownChevronVariants, dropdownClearVariants, dropdownEmptyVariants, dropdownGroupVariants, dropdownLoadingVariants, dropdownOptionVariants, dropdownOverflowBadgeVariants, dropdownPanelVariants, dropdownSearchVariants, dropdownTagRemoveVariants, dropdownTagVariants, dropdownTriggerVariants, generateDropdownId };
 //# sourceMappingURL=ngx-com-components-dropdown.mjs.map