@angular-bootstrap/ngbootstrap 0.0.8 → 0.0.9

package/fesm2022/angular-bootstrap-ngbootstrap.mjs

@@ -2198,6 +2198,8 @@ class NgbTypeaheadComponent {
     updateOnTab = true;
     separator = ',';
     chips = false;
+    vScroll = false;
+    vItemSize = 40;
     // `TemplateRef` types can become non-assignable in monorepo setups with multiple Angular installations.
     // Using `any` keeps the API flexible while still supporting Angular templates at runtime.
     itemTemplate;
@@ -2241,6 +2243,7 @@ class NgbTypeaheadComponent {
     itemHeight = 40;
     beforePadding = 0;
     afterPadding = 0;
+    viewportStartIndex = 0;
     debounceId;
     onControlChange = () => { };
     onControlTouched = () => { };
@@ -2250,6 +2253,11 @@ class NgbTypeaheadComponent {
         this.applyFilter('');
     }
     ngOnChanges(changes) {
+        if (changes['vScroll'] || changes['vItemSize']) {
+            const nextSize = Number(this.vItemSize);
+            this.itemHeight = Number.isFinite(nextSize) && nextSize > 0 ? nextSize : 40;
+            this.updateViewport(this.scroller?.nativeElement.scrollTop || 0);
+        }
         if (changes['data'] && !changes['data'].firstChange) {
             this.applyFilter(this.query);
         }
@@ -2450,15 +2458,37 @@ class NgbTypeaheadComponent {
             this.focusInput();
             return;
         }
+        if (event.key === 'Tab' && this.overlayVisible) {
+            const active = this.visible[this.activeIndex];
+            if (active) {
+                this.selectItem(active);
+                this.hideOverlay(event);
+            }
+            return;
+        }
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
             event.preventDefault();
             this.moveActive(event.key === 'ArrowDown' ? 1 : -1);
         }
+        else if (event.key === 'Home') {
+            if (this.overlayVisible) {
+                event.preventDefault();
+                this.setActiveGlobalIndex(0);
+            }
+        }
+        else if (event.key === 'End') {
+            if (this.overlayVisible) {
+                event.preventDefault();
+                this.setActiveGlobalIndex(this.filtered.length - 1);
+            }
+        }
         else if (event.key === 'Enter') {
             event.preventDefault();
             const active = this.visible[this.activeIndex] || this.visible[0];
-            if (active)
+            if (active) {
                 this.selectItem(active);
+                this.hideOverlay(event);
+            }
         }
         else if (event.key === 'Escape') {
             if (this.overlayVisible) {
@@ -2649,6 +2679,14 @@ class NgbTypeaheadComponent {
         this.cdr.markForCheck();
     }
     updateViewport(scrollTop) {
+        if (!this.vScroll) {
+            this.beforePadding = 0;
+            this.afterPadding = 0;
+            this.visible = this.filtered;
+            this.viewportStartIndex = 0;
+            this.activeIndex = this.visible.length ? Math.min(this.activeIndex, this.visible.length - 1) : -1;
+            return;
+        }
         const total = this.filtered.length;
         const visibleCount = Math.ceil(this.viewportHeight / this.itemHeight) + 2;
         const start = Math.max(Math.floor(scrollTop / this.itemHeight), 0);
@@ -2656,6 +2694,7 @@ class NgbTypeaheadComponent {
         this.beforePadding = start * this.itemHeight;
         this.afterPadding = Math.max(total - end, 0) * this.itemHeight;
         this.visible = this.filtered.slice(start, end);
+        this.viewportStartIndex = start;
         this.activeIndex = this.visible.length ? Math.min(this.activeIndex, this.visible.length - 1) : -1;
     }
     activatePreferredOption() {
@@ -2685,12 +2724,46 @@ class NgbTypeaheadComponent {
         if (!this.overlayVisible) {
             this.showOverlay();
         }
-        if (!this.visible.length)
+        if (!this.filtered.length)
+            return;
+        const currentGlobal = this.activeGlobalIndex();
+        const total = this.filtered.length;
+        const nextGlobal = currentGlobal < 0 ? 0 : (currentGlobal + direction + total) % total;
+        this.setActiveGlobalIndex(nextGlobal);
+    }
+    activeGlobalIndex() {
+        if (this.activeIndex < 0)
+            return -1;
+        return this.viewportStartIndex + this.activeIndex;
+    }
+    setActiveGlobalIndex(globalIndex) {
+        if (!this.filtered.length) {
+            this.activeIndex = -1;
+            return;
+        }
+        const clamped = Math.max(0, Math.min(globalIndex, this.filtered.length - 1));
+        const scroller = this.scroller?.nativeElement;
+        if (!scroller) {
+            this.activeIndex = 0;
             return;
-        const nextIndex = this.activeIndex < 0 ? 0 : (this.activeIndex + direction + this.visible.length) % this.visible.length;
-        this.activeIndex = nextIndex;
-        const buttons = this.scroller?.nativeElement.querySelectorAll('button.dropdown-item');
-        buttons?.[this.activeIndex]?.focus();
+        }
+        const itemTop = clamped * this.itemHeight;
+        const itemBottom = itemTop + this.itemHeight;
+        const viewTop = scroller.scrollTop;
+        const viewBottom = viewTop + (scroller.clientHeight || this.viewportHeight);
+        let nextScrollTop = viewTop;
+        if (itemTop < viewTop) {
+            nextScrollTop = itemTop;
+        }
+        else if (itemBottom > viewBottom) {
+            nextScrollTop = Math.max(0, itemBottom - (scroller.clientHeight || this.viewportHeight));
+        }
+        if (nextScrollTop !== viewTop) {
+            scroller.scrollTop = nextScrollTop;
+        }
+        this.updateViewport(scroller.scrollTop);
+        this.activeIndex = Math.max(0, Math.min(clamped - this.viewportStartIndex, this.visible.length - 1));
+        this.cdr.markForCheck();
     }
     validateItem(item) {
         if (item.id == null) {
@@ -2810,7 +2883,7 @@ class NgbTypeaheadComponent {
         return { id: `${value}`, label: `${value}`, value };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTypeaheadComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbTypeaheadComponent, isStandalone: true, selector: "ngb-typeahead", inputs: { data: "data", debounceTime: "debounceTime", characterTyped: "characterTyped", limit: "limit", selectExact: "selectExact", multiSelect: "multiSelect", matchSelection: "matchSelection", showDropdownButton: "showDropdownButton", showClearButton: "showClearButton", updateOnBlur: "updateOnBlur", updateOnTab: "updateOnTab", separator: "separator", chips: "chips", itemTemplate: "itemTemplate", i18n: "i18n" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onAdd: "onAdd", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onInputKeydown: "onInputKeydown", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad", selectedItems: "selectedItems", selectionChange: "selectionChange", onChange: "onChange", onScrollEvent: "onScrollEvent" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:focusin": "onDocumentFocusIn($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbTypeaheadComponent, isStandalone: true, selector: "ngb-typeahead", inputs: { data: "data", debounceTime: "debounceTime", characterTyped: "characterTyped", limit: "limit", selectExact: "selectExact", multiSelect: "multiSelect", matchSelection: "matchSelection", showDropdownButton: "showDropdownButton", showClearButton: "showClearButton", updateOnBlur: "updateOnBlur", updateOnTab: "updateOnTab", separator: "separator", chips: "chips", vScroll: "vScroll", vItemSize: "vItemSize", itemTemplate: "itemTemplate", i18n: "i18n" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onAdd: "onAdd", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onInputKeydown: "onInputKeydown", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad", selectedItems: "selectedItems", selectionChange: "selectionChange", onChange: "onChange", onScrollEvent: "onScrollEvent" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:focusin": "onDocumentFocusIn($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgbTypeaheadComponent),
@@ -2898,7 +2971,7 @@ class NgbTypeaheadComponent {
         role="listbox"
         (scroll)="onScroll($event)"
       >
-        <div [style.height.px]="beforePadding"></div>
+        <div *ngIf="vScroll" [style.height.px]="beforePadding"></div>
 
         <button
           *ngFor="let item of visible; trackBy: trackById; let idx = index"
@@ -2940,7 +3013,7 @@ class NgbTypeaheadComponent {
           </div>
         </button>
 
-        <div [style.height.px]="afterPadding"></div>
+        <div *ngIf="vScroll" [style.height.px]="afterPadding"></div>
 
         <div *ngIf="showNoResults" class="dropdown-item text-muted text-center">
           {{ i18n?.noResults || 'No results' }}
@@ -3046,7 +3119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         role="listbox"
         (scroll)="onScroll($event)"
       >
-        <div [style.height.px]="beforePadding"></div>
+        <div *ngIf="vScroll" [style.height.px]="beforePadding"></div>
 
         <button
           *ngFor="let item of visible; trackBy: trackById; let idx = index"
@@ -3088,7 +3161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           </div>
         </button>
 
-        <div [style.height.px]="afterPadding"></div>
+        <div *ngIf="vScroll" [style.height.px]="afterPadding"></div>
 
         <div *ngIf="showNoResults" class="dropdown-item text-muted text-center">
           {{ i18n?.noResults || 'No results' }}
@@ -3129,6 +3202,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], chips: [{
                 type: Input
+            }], vScroll: [{
+                type: Input
+            }], vItemSize: [{
+                type: Input
             }], itemTemplate: [{
                 type: Input
             }], i18n: [{