ngx-com 0.1.7 → 0.1.9

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, effect, forwardRef } from '@angular/core';
+import { viewChild, input, output, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, signal, TemplateRef, Directive, ElementRef, Injector, ViewContainerRef, contentChild, model, linkedSignal, effect, afterNextRender, forwardRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
 import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
@@ -1423,6 +1423,7 @@ const VIRTUAL_SCROLL_THRESHOLD = 50;
 class ComDropdown {
     elementRef = inject(ElementRef);
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     liveAnnouncer = inject(LiveAnnouncer);
@@ -1498,8 +1499,19 @@ class ComDropdown {
     searchDebounceMs = input(300, ...(ngDevMode ? [{ debugName: "searchDebounceMs" }] : []));
     /** Virtual scroll threshold. */
     virtualScrollThreshold = input(VIRTUAL_SCROLL_THRESHOLD, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : []));
-    /** Item size in pixels for virtual scrolling. */
-    virtualScrollItemSize = input(40, ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : []));
+    /** Item size in pixels for virtual scrolling. When not set, auto-calculated from the size variant. */
+    virtualScrollItemSize = input(undefined, ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : []));
+    /** Effective item size for virtual scroll, computed from size variant when not explicitly set. */
+    effectiveItemSize = computed(() => {
+        const explicit = this.virtualScrollItemSize();
+        if (explicit !== undefined)
+            return explicit;
+        switch (this.size()) {
+            case 'sm': return 28;
+            case 'lg': return 48;
+            default: return 36;
+        }
+    }, ...(ngDevMode ? [{ debugName: "effectiveItemSize" }] : []));
     /** Maximum number of tags to display in multi-select mode. Set to null for no limit. */
     maxVisibleTags = input(2, ...(ngDevMode ? [{ debugName: "maxVisibleTags" }] : []));
     /** Custom error state matcher for determining when to show errors. */
@@ -1705,7 +1717,7 @@ class ComDropdown {
     }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
     /** Computed panel classes. */
     panelClasses = computed(() => {
-        return mergeClasses('w-full z-50 overflow-hidden rounded-overlay border border-border-subtle bg-popover text-popover-foreground shadow-overlay outline-none', this.panelClass());
+        return mergeClasses('w-full z-50 h-fit overflow-hidden rounded-overlay border border-border-subtle bg-popover text-popover-foreground shadow-overlay outline-none', this.panelClass());
     }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
     /** Computed chevron classes. */
     chevronClasses = computed(() => {
@@ -1986,6 +1998,7 @@ class ComDropdown {
         const newValues = current.filter((v) => !compare(v, value));
         this.updateValue(newValues.length > 0 ? newValues : []);
         this.announce(`${this.displayWith()(value)} removed`);
+        this.repositionOverlay();
     }
     trackByValue(item, _index) {
         return item;
@@ -2039,6 +2052,13 @@ class ComDropdown {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.close());
     }
+    /** Re-positions the overlay after the trigger height changes (e.g. tags added/removed). */
+    repositionOverlay() {
+        if (!this.overlayRef)
+            return;
+        // Wait for Angular to render the updated trigger before recalculating position
+        afterNextRender(() => this.overlayRef?.updatePosition(), { injector: this.injector });
+    }
     destroyOverlay() {
         if (this.overlayRef) {
             this.overlayRef.dispose();
@@ -2083,6 +2103,7 @@ class ComDropdown {
             this.announce(`${this.displayWith()(value)} selected`);
         }
         this.updateValue(newValues.length > 0 ? newValues : []);
+        this.repositionOverlay();
     }
     navigateOptions(direction) {
         const options = this.groupBy() ? this.flattenGroupedOptions() : this.filteredOptions();
@@ -2364,7 +2385,7 @@ class ComDropdown {
         @if (virtualScrollEnabled() && groupedOptions().length === 0 && filteredOptions().length > 0) {
           <!-- Virtual scrolling for large ungrouped lists -->
           <cdk-virtual-scroll-viewport
-            [itemSize]="virtualScrollItemSize()"
+            [itemSize]="effectiveItemSize()"
             [maxBufferPx]="400"
             [minBufferPx]="200"
             [style.height]="maxHeight()"
@@ -2619,7 +2640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         @if (virtualScrollEnabled() && groupedOptions().length === 0 && filteredOptions().length > 0) {
           <!-- Virtual scrolling for large ungrouped lists -->
           <cdk-virtual-scroll-viewport
-            [itemSize]="virtualScrollItemSize()"
+            [itemSize]="effectiveItemSize()"
             [maxBufferPx]="400"
             [minBufferPx]="200"
             [style.height]="maxHeight()"