@angular-bootstrap/ngbootstrap 0.0.6 → 0.0.8

package/fesm2022/angular-bootstrap-ngbootstrap.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, EventEmitter, Output, ChangeDetectionStrategy, Component, inject, Injectable, TemplateRef, QueryList, ContentChildren, ContentChild, InjectionToken, signal, Optional, Inject, ElementRef, HostListener, HostBinding, ViewChild, ViewChildren } from '@angular/core';
+import { Input, Directive, EventEmitter, Output, ChangeDetectionStrategy, Component, inject, Injectable, TemplateRef, QueryList, ContentChildren, ContentChild, InjectionToken, signal, Optional, Inject, ElementRef, HostListener, HostBinding, ViewChild, forwardRef, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormBuilder, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormControl, Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { firstValueFrom, isObservable } from 'rxjs';
 
 class NgbCellTemplate {
@@ -1755,365 +1755,568 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }] } });
 
 class NgbSplitterPaneComponent {
-    templateRef;
-    size;
-    min;
-    max;
+    size = ''; // e.g., '30%' or '200px'
+    min = '0px';
+    max = '100%';
+    scrollable = true;
     collapsible = false;
     collapsed = false;
     collapsedChange = new EventEmitter();
-    toggleCollapsed(next) {
-        const value = next ?? !this.collapsed;
-        if (value !== this.collapsed) {
-            this.collapsed = value;
-            this.collapsedChange.emit(this.collapsed);
-        }
-    }
+    template;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbSplitterPaneComponent, isStandalone: true, selector: "ngb-splitter-pane", inputs: { size: "size", min: "min", max: "max", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["paneTpl"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #paneTpl><ng-content></ng-content></ng-template>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbSplitterPaneComponent, isStandalone: true, selector: "ngb-splitter-pane", inputs: { size: "size", min: "min", max: "max", scrollable: "scrollable", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #content>
+      <div [style.overflow]="scrollable ? 'auto' : 'hidden'" style="height: 100%; width: 100%;">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>`, isInline: true, styles: [":host{display:block;position:relative}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterPaneComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ngb-splitter-pane',
-                    standalone: true,
-                    template: `<ng-template #paneTpl><ng-content></ng-content></ng-template>`,
-                }]
-        }], propDecorators: { templateRef: [{
-                type: ViewChild,
-                args: ['paneTpl', { static: true }]
-            }], size: [{
+            args: [{ selector: 'ngb-splitter-pane', standalone: true, template: `<ng-template #content>
+      <div [style.overflow]="scrollable ? 'auto' : 'hidden'" style="height: 100%; width: 100%;">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>`, styles: [":host{display:block;position:relative}\n"] }]
+        }], propDecorators: { size: [{
                 type: Input
             }], min: [{
                 type: Input
             }], max: [{
                 type: Input
+            }], scrollable: [{
+                type: Input
             }], collapsible: [{
                 type: Input
             }], collapsed: [{
                 type: Input
             }], collapsedChange: [{
                 type: Output
+            }], template: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
             }] } });
 
 class NgbSplitterComponent {
+    el;
     panes;
-    container;
     orientation = 'horizontal';
     handleThickness = 12;
-    paneStates = [];
-    resizeSub;
-    currentDrag;
-    ngAfterContentInit() {
-        this.initStates();
-        this.panes.changes.subscribe(() => this.initStates());
-    }
-    ngOnChanges(changes) {
-        if (changes['orientation'] && !changes['orientation'].firstChange) {
-            this.initStates();
-        }
-    }
-    ngOnDestroy() {
-        this.detachDragListeners();
+    handleIconColor = '#000';
+    verticalMinHeight = '280px';
+    resizable = true; // New Resize Input
+    barColor = '#ccc'; // Custom Bar Color
+    lineColor = '#000'; // Custom Line Color
+    isDragging = false;
+    currentHandleIndex = -1;
+    constructor(el) {
+        this.el = el;
+    }
+    // Listeners for global mouse movement
+    onMouseMove(event) {
+        if (!this.isDragging || !this.resizable)
+            return;
+        this.resize(event);
     }
-    onWindowResize() {
-        this.initStates();
+    onMouseUp() {
+        this.isDragging = false;
+        document.body.style.cursor = 'default';
     }
-    startResize(index, event) {
+    onMouseDown(event, index) {
+        if (!this.resizable)
+            return;
         event.preventDefault();
-        const total = this.getContainerSize();
-        const sizes = this.computePaneSizes(total);
-        this.currentDrag = {
-            index,
-            startPos: this.pointerPosition(event),
-            startSizes: [sizes[index], sizes[index + 1]],
-        };
-        const move = (e) => this.onDrag(e);
-        const up = () => this.stopDrag();
-        document.addEventListener('mousemove', move);
-        document.addEventListener('mouseup', up, { once: true });
-        this.resizeSub = { move, up };
-    }
-    onHandleKeydown(index, event) {
+        this.isDragging = true;
+        this.currentHandleIndex = index;
+        document.body.style.cursor = this.orientation === 'horizontal' ? 'col-resize' : 'row-resize';
+    }
+    resize(event) {
+        const container = this.el.nativeElement.querySelector('.splitter-container');
+        const rect = container.getBoundingClientRect();
+        const paneArr = this.panes.toArray();
+        const paneWrappers = Array.from(this.el.nativeElement.querySelectorAll('.pane-wrapper'));
+        const targetPane = paneArr[this.currentHandleIndex];
+        if (!targetPane || !paneWrappers.length) {
+            return;
+        }
         const isHorizontal = this.orientation === 'horizontal';
-        const delta = this.handleThickness;
-        if ((isHorizontal && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) ||
-            (!isHorizontal && (event.key === 'ArrowUp' || event.key === 'ArrowDown'))) {
-            event.preventDefault();
-            const direction = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;
-            this.adjustPaneSizes(index, delta * direction);
+        const totalPixels = isHorizontal ? rect.width : rect.height;
+        if (totalPixels <= 0) {
+            return;
         }
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.toggleFromHandle(index);
+        const mousePos = isHorizontal ? event.clientX - rect.left : event.clientY - rect.top;
+        let consumed = 0;
+        for (let i = 0; i < this.currentHandleIndex; i++) {
+            const prevPaneElement = paneWrappers[i];
+            if (!prevPaneElement) {
+                continue;
+            }
+            const prevRect = prevPaneElement.getBoundingClientRect();
+            consumed += isHorizontal ? prevRect.width : prevRect.height;
+            consumed += this.handleThickness;
         }
-    }
-    toggleFromHandle(index) {
-        const panesArray = this.panes.toArray();
-        const target = panesArray[index].collapsible ? panesArray[index] : panesArray[index + 1];
-        if (target?.collapsible) {
-            target.toggleCollapsed();
-            this.initStates();
+        let newSizeValue = ((mousePos - consumed) / totalPixels) * 100;
+        const minPercent = this.sizeToPercent(targetPane.min, totalPixels);
+        const maxPercent = this.sizeToPercent(targetPane.max, totalPixels);
+        if (minPercent !== null) {
+            newSizeValue = Math.max(newSizeValue, minPercent);
         }
-    }
-    onDrag(event) {
-        if (!this.currentDrag) {
-            return;
+        if (maxPercent !== null) {
+            newSizeValue = Math.min(newSizeValue, maxPercent);
         }
+        newSizeValue = Math.max(0, Math.min(100, newSizeValue));
+        targetPane.size = `${newSizeValue}%`;
+    }
+    onHandleToggle(event, index) {
+        event.stopPropagation();
         event.preventDefault();
-        const delta = this.pointerPosition(event) - this.currentDrag.startPos;
-        this.adjustPaneSizes(this.currentDrag.index, delta, this.currentDrag.startSizes);
-    }
-    stopDrag() {
-        this.detachDragListeners();
-        this.currentDrag = undefined;
-    }
-    adjustPaneSizes(index, delta, startSizes) {
-        const total = this.getContainerSize();
-        const sizes = startSizes ?? this.computePaneSizes(total);
-        const panesArray = this.panes.toArray();
-        const first = panesArray[index];
-        const second = panesArray[index + 1];
-        if (first.collapsed || second.collapsed) {
-            return;
-        }
-        let firstSize = sizes[0] + delta;
-        let secondSize = sizes[1] - delta;
-        const firstLimits = this.getLimits(first, total);
-        const secondLimits = this.getLimits(second, total);
-        firstSize = this.clamp(firstSize, firstLimits.minPx, firstLimits.maxPx);
-        secondSize = this.clamp(secondSize, secondLimits.minPx, secondLimits.maxPx);
-        if (firstSize + secondSize > 0) {
-            this.paneStates[index].sizePx = firstSize;
-            this.paneStates[index + 1].sizePx = secondSize;
-        }
-    }
-    initStates() {
-        const total = this.getContainerSize();
-        const sizes = this.computePaneSizes(total);
-        const panesArray = this.panes.toArray();
-        this.paneStates = panesArray.map((pane, idx) => {
-            const limits = this.getLimits(pane, total);
-            return {
-                id: `ngb-splitter-pane-${idx}`,
-                sizePx: pane.collapsed ? 0 : sizes[idx],
-                minPx: limits.minPx,
-                maxPx: limits.maxPx,
-            };
-        });
+        this.togglePane(index);
     }
-    computePaneSizes(total) {
-        const panesArray = this.panes?.toArray() ?? [];
-        if (!panesArray.length)
-            return [];
-        const resolved = panesArray.map((pane) => pane.collapsed ? 0 : this.resolveSize(pane.size, total));
-        const specifiedTotal = resolved.reduce((sum, val) => sum + (val ?? 0), 0);
-        const unspecified = resolved.filter((v) => v == null).length;
-        const remaining = Math.max(total - specifiedTotal, 0);
-        const autoSize = unspecified > 0 ? remaining / unspecified : 0;
-        return resolved.map((val) => {
-            if (val != null) {
-                return val;
-            }
-            if (autoSize) {
-                return autoSize;
-            }
-            return total / panesArray.length;
-        });
+    getCollapseIcon(pane) {
+        if (!pane.collapsible) {
+            return '';
+        }
+        if (this.orientation === 'horizontal') {
+            return pane.collapsed ? 'bi-caret-right-fill' : 'bi-caret-left-fill';
+        }
+        return pane.collapsed ? 'bi-caret-down-fill' : 'bi-caret-up-fill';
     }
-    resolveSize(value, total) {
-        if (!value)
-            return undefined;
+    getPaneFlex(pane) {
+        if (pane.collapsed) {
+            return '0 0 0px';
+        }
+        if (pane.size) {
+            return `0 0 ${pane.size}`;
+        }
+        return '1 1 0px';
+    }
+    sizeToPercent(value, totalPixels) {
+        if (!value) {
+            return null;
+        }
         const trimmed = value.trim();
+        if (!trimmed) {
+            return null;
+        }
         if (trimmed.endsWith('%')) {
-            const pct = Number.parseFloat(trimmed.slice(0, -1));
-            return (pct / 100) * total;
+            const percent = parseFloat(trimmed);
+            return Number.isFinite(percent) ? percent : null;
+        }
+        const numeric = parseFloat(trimmed);
+        if (!Number.isFinite(numeric)) {
+            return null;
         }
         if (trimmed.endsWith('px')) {
-            return Number.parseFloat(trimmed.replace('px', ''));
+            return totalPixels > 0 ? (numeric / totalPixels) * 100 : null;
+        }
+        return numeric;
+    }
+    togglePane(index) {
+        const pane = this.panes.toArray()[index];
+        pane.collapsed = !pane.collapsed;
+        pane.collapsedChange.emit(pane.collapsed);
+    }
+    getSeparatorAriaOrientation() {
+        // For left/right panes, the separator is vertical. For top/bottom panes, it is horizontal.
+        return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+    }
+    getHandleValueNow(index) {
+        const container = this.el.nativeElement.querySelector('.splitter-container');
+        const rect = container.getBoundingClientRect();
+        const paneWrappers = Array.from(this.el.nativeElement.querySelectorAll('.pane-wrapper'));
+        const target = paneWrappers[index];
+        const totalPixels = this.orientation === 'horizontal' ? rect.width : rect.height;
+        if (!target || totalPixels <= 0) {
+            return null;
         }
-        const asNumber = Number.parseFloat(trimmed);
-        return Number.isFinite(asNumber) ? asNumber : undefined;
+        const paneRect = target.getBoundingClientRect();
+        const panePixels = this.orientation === 'horizontal' ? paneRect.width : paneRect.height;
+        return Math.round((panePixels / totalPixels) * 100);
     }
-    getLimits(pane, total) {
-        return {
-            minPx: pane.collapsed ? 0 : this.resolveSize(pane.min, total),
-            maxPx: pane.collapsed ? 0 : this.resolveSize(pane.max, total),
-        };
+    getHandleValueMin(index) {
+        const pane = this.panes?.toArray?.()[index];
+        const container = this.el.nativeElement.querySelector('.splitter-container');
+        const rect = container.getBoundingClientRect();
+        const totalPixels = this.orientation === 'horizontal' ? rect.width : rect.height;
+        if (!pane || totalPixels <= 0) {
+            return null;
+        }
+        return this.sizeToPercent(pane.min, totalPixels);
+    }
+    getHandleValueMax(index) {
+        const pane = this.panes?.toArray?.()[index];
+        const container = this.el.nativeElement.querySelector('.splitter-container');
+        const rect = container.getBoundingClientRect();
+        const totalPixels = this.orientation === 'horizontal' ? rect.width : rect.height;
+        if (!pane || totalPixels <= 0) {
+            return null;
+        }
+        return this.sizeToPercent(pane.max, totalPixels);
     }
-    clamp(value, min, max) {
-        let next = value;
-        if (min != null)
-            next = Math.max(min, next);
-        if (max != null)
-            next = Math.min(max, next);
-        return next;
-    }
-    pointerPosition(event) {
-        return this.orientation === 'horizontal' ? event.clientX : event.clientY;
-    }
-    getContainerSize() {
-        const rect = this.container?.nativeElement.getBoundingClientRect();
-        return rect && this.orientation === 'horizontal' ? rect.width : rect?.height || 0;
-    }
-    detachDragListeners() {
-        if (this.resizeSub) {
-            document.removeEventListener('mousemove', this.resizeSub.move);
-            document.removeEventListener('mouseup', this.resizeSub.up);
-            this.resizeSub = undefined;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbSplitterComponent, isStandalone: true, selector: "ngb-splitter", inputs: { orientation: "orientation", handleThickness: "handleThickness" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "panes", predicate: NgbSplitterPaneComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div
-      #container
-      class="d-flex"
-      [class.flex-row]="orientation === 'horizontal'"
-      [class.flex-column]="orientation === 'vertical'"
-      role="group"
-    >
-      <ng-container *ngFor="let pane of panes.toArray(); let i = index">
-        <div
-          class="d-flex flex-column overflow-auto"
-          [attr.data-pane-id]="paneStates[i]?.id"
-          [class.d-none]="pane.collapsed"
-          [style.flex-basis.px]="paneStates[i]?.sizePx"
-          [style.min-width.px]="orientation === 'horizontal' ? paneStates[i]?.minPx : undefined"
-          [style.max-width.px]="orientation === 'horizontal' ? paneStates[i]?.maxPx : undefined"
-          [style.min-height.px]="orientation === 'vertical' ? paneStates[i]?.minPx : undefined"
-          [style.max-height.px]="orientation === 'vertical' ? paneStates[i]?.maxPx : undefined"
+    onHandleKeyDown(event, index) {
+        if (event.key === 'Enter') {
+            const pane = this.panes.toArray()[index];
+            if (pane?.collapsible) {
+                event.preventDefault();
+                this.togglePane(index);
+            }
+            return;
+        }
+        const isHorizontal = this.orientation === 'horizontal';
+        const negativeKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        const positiveKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        if (event.key !== negativeKey && event.key !== positiveKey) {
+            return;
+        }
+        if (!this.resizable) {
+            return;
+        }
+        event.preventDefault();
+        const delta = (event.shiftKey ? 5 : 2) * (event.key === positiveKey ? 1 : -1);
+        this.resizeByPercent(index, delta);
+    }
+    resizeByPercent(index, deltaPercent) {
+        const container = this.el.nativeElement.querySelector('.splitter-container');
+        const rect = container.getBoundingClientRect();
+        const paneArr = this.panes.toArray();
+        const paneWrappers = Array.from(this.el.nativeElement.querySelectorAll('.pane-wrapper'));
+        const targetPane = paneArr[index];
+        const targetWrapper = paneWrappers[index];
+        if (!targetPane || !targetWrapper) {
+            return;
+        }
+        const totalPixels = this.orientation === 'horizontal' ? rect.width : rect.height;
+        if (totalPixels <= 0) {
+            return;
+        }
+        const wrapperRect = targetWrapper.getBoundingClientRect();
+        const currentPixels = this.orientation === 'horizontal' ? wrapperRect.width : wrapperRect.height;
+        let nextPercent = (currentPixels / totalPixels) * 100 + deltaPercent;
+        const minPercent = this.sizeToPercent(targetPane.min, totalPixels);
+        const maxPercent = this.sizeToPercent(targetPane.max, totalPixels);
+        if (minPercent !== null) {
+            nextPercent = Math.max(nextPercent, minPercent);
+        }
+        if (maxPercent !== null) {
+            nextPercent = Math.min(nextPercent, maxPercent);
+        }
+        nextPercent = Math.max(0, Math.min(100, nextPercent));
+        targetPane.size = `${nextPercent}%`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbSplitterComponent, isStandalone: true, selector: "ngb-splitter", inputs: { orientation: "orientation", handleThickness: "handleThickness", handleIconColor: "handleIconColor", verticalMinHeight: "verticalMinHeight", resizable: "resizable", barColor: "barColor", lineColor: "lineColor" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "panes", predicate: NgbSplitterPaneComponent }], ngImport: i0, template: `
+    <div class="splitter-container" [class.vertical]="orientation === 'vertical'"
+      [style.min-height]="orientation === 'vertical' ? verticalMinHeight : null"
+      [style.height]="orientation === 'vertical' ? verticalMinHeight : null">
+      <!-- Iterate through the QueryList of panes -->
+      <ng-container *ngFor="let pane of panes; let i = index">
+        <div class="pane-wrapper" [style.flex]="getPaneFlex(pane)"
+        [style.min-width]="orientation === 'horizontal' ? (pane.min || '0px') : null"
+        [style.max-width]="orientation === 'horizontal' ? pane.max : null"
+        [style.min-height]="orientation === 'vertical' ? (pane.min || '0px') : null"
+        [style.max-height]="orientation === 'vertical' ? pane.max : null"
         >
-          <ng-container *ngTemplateOutlet="pane.templateRef"></ng-container>
+          <!-- Access the 'template' property we defined in the Pane component -->
+          <ng-container [ngTemplateOutlet]="pane.template"></ng-container>
         </div>
 
-        <button
-          *ngIf="i < panes.length - 1"
-          type="button"
-          class="bg-transparent border-0 p-0 d-flex align-items-center justify-content-center"
-          [style.width.px]="orientation === 'horizontal' ? handleThickness : undefined"
-          [style.height.px]="orientation === 'vertical' ? handleThickness : undefined"
-          [class.w-100]="orientation === 'vertical'"
-          [class.h-100]="orientation === 'horizontal'"
-          role="separator"
-          [attr.aria-orientation]="orientation"
-          [attr.aria-controls]="paneStates[i]?.id + ' ' + paneStates[i + 1]?.id"
-          tabindex="0"
-          (mousedown)="startResize(i, $event)"
-          (keydown)="onHandleKeydown(i, $event)"
-          (dblclick)="toggleFromHandle(i)"
-          aria-label="Splitter resize handle"
-        >
-          <span class="border bg-light" [style.width.px]="orientation === 'horizontal' ? 2 : handleThickness" [style.height.px]="orientation === 'vertical' ? 2 : handleThickness"></span>
-        </button>
+        <div *ngIf="i < panes.length - 1" class="splitbar" 
+        [class.resizable]="resizable"
+        [style.background-color]="barColor"
+        [style.width.px]="orientation === 'horizontal' ? handleThickness : '100%'" 
+        [style.height.px]="orientation === 'vertical' ? handleThickness : '100%'" 
+        role="separator"
+        tabindex="0"
+        [attr.aria-orientation]="getSeparatorAriaOrientation()"
+        [attr.aria-valuenow]="getHandleValueNow(i)"
+        [attr.aria-valuemin]="getHandleValueMin(i)"
+        [attr.aria-valuemax]="getHandleValueMax(i)"
+        (keydown)="onHandleKeyDown($event, i)"
+        (mousedown)="onMouseDown($event, i)">
+          <div class="handle-line" [style.background-color]="lineColor">
+            <span
+              *ngIf="pane.collapsible"
+              class="collapse-arrow bi"
+              [ngClass]="getCollapseIcon(pane)"
+              [style.color]="handleIconColor"
+              (click)="onHandleToggle($event, i)"
+              aria-hidden="true"
+            ></span>
+          </div>
+        </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%}.splitter-container{display:flex;height:100%;width:100%}.splitter-container.vertical{flex-direction:column}.splitbar{background:#ccc;width:5px;position:relative;align-items:center;justify-content:center;flex:0 0 auto;z-index:10}.splitbar.resizable{cursor:col-resize}.splitbar:hover{filter:brightness(90%)}.handle-line{border-radius:2px;opacity:.8;left:45%;position:absolute;top:45%;display:flex;align-items:center;justify-content:center}.splitter-container:not(.vertical) .handle-line{width:2px;height:10px}.pane-wrapper{position:relative;min-width:0;min-height:0;overflow:hidden;flex-shrink:1}.vertical .handle-line{height:2px;width:10px}.vertical .splitbar.resizable{cursor:row-resize}.splitter-container.vertical .splitter-container .splitbar.resizable{cursor:col-resize}.vertical .splitbar{width:100%}.collapse-btn{cursor:pointer;background:#666;width:10px;height:10px;position:absolute;top:50%}.collapse-arrow{font-size:.95rem;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;position:absolute;top:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ngb-splitter',
-                    standalone: true,
-                    imports: [CommonModule, NgbSplitterPaneComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <div
-      #container
-      class="d-flex"
-      [class.flex-row]="orientation === 'horizontal'"
-      [class.flex-column]="orientation === 'vertical'"
-      role="group"
-    >
-      <ng-container *ngFor="let pane of panes.toArray(); let i = index">
-        <div
-          class="d-flex flex-column overflow-auto"
-          [attr.data-pane-id]="paneStates[i]?.id"
-          [class.d-none]="pane.collapsed"
-          [style.flex-basis.px]="paneStates[i]?.sizePx"
-          [style.min-width.px]="orientation === 'horizontal' ? paneStates[i]?.minPx : undefined"
-          [style.max-width.px]="orientation === 'horizontal' ? paneStates[i]?.maxPx : undefined"
-          [style.min-height.px]="orientation === 'vertical' ? paneStates[i]?.minPx : undefined"
-          [style.max-height.px]="orientation === 'vertical' ? paneStates[i]?.maxPx : undefined"
+            args: [{ selector: 'ngb-splitter', standalone: true, imports: [CommonModule, NgbSplitterPaneComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="splitter-container" [class.vertical]="orientation === 'vertical'"
+      [style.min-height]="orientation === 'vertical' ? verticalMinHeight : null"
+      [style.height]="orientation === 'vertical' ? verticalMinHeight : null">
+      <!-- Iterate through the QueryList of panes -->
+      <ng-container *ngFor="let pane of panes; let i = index">
+        <div class="pane-wrapper" [style.flex]="getPaneFlex(pane)"
+        [style.min-width]="orientation === 'horizontal' ? (pane.min || '0px') : null"
+        [style.max-width]="orientation === 'horizontal' ? pane.max : null"
+        [style.min-height]="orientation === 'vertical' ? (pane.min || '0px') : null"
+        [style.max-height]="orientation === 'vertical' ? pane.max : null"
         >
-          <ng-container *ngTemplateOutlet="pane.templateRef"></ng-container>
+          <!-- Access the 'template' property we defined in the Pane component -->
+          <ng-container [ngTemplateOutlet]="pane.template"></ng-container>
         </div>
 
-        <button
-          *ngIf="i < panes.length - 1"
-          type="button"
-          class="bg-transparent border-0 p-0 d-flex align-items-center justify-content-center"
-          [style.width.px]="orientation === 'horizontal' ? handleThickness : undefined"
-          [style.height.px]="orientation === 'vertical' ? handleThickness : undefined"
-          [class.w-100]="orientation === 'vertical'"
-          [class.h-100]="orientation === 'horizontal'"
-          role="separator"
-          [attr.aria-orientation]="orientation"
-          [attr.aria-controls]="paneStates[i]?.id + ' ' + paneStates[i + 1]?.id"
-          tabindex="0"
-          (mousedown)="startResize(i, $event)"
-          (keydown)="onHandleKeydown(i, $event)"
-          (dblclick)="toggleFromHandle(i)"
-          aria-label="Splitter resize handle"
-        >
-          <span class="border bg-light" [style.width.px]="orientation === 'horizontal' ? 2 : handleThickness" [style.height.px]="orientation === 'vertical' ? 2 : handleThickness"></span>
-        </button>
+        <div *ngIf="i < panes.length - 1" class="splitbar" 
+        [class.resizable]="resizable"
+        [style.background-color]="barColor"
+        [style.width.px]="orientation === 'horizontal' ? handleThickness : '100%'" 
+        [style.height.px]="orientation === 'vertical' ? handleThickness : '100%'" 
+        role="separator"
+        tabindex="0"
+        [attr.aria-orientation]="getSeparatorAriaOrientation()"
+        [attr.aria-valuenow]="getHandleValueNow(i)"
+        [attr.aria-valuemin]="getHandleValueMin(i)"
+        [attr.aria-valuemax]="getHandleValueMax(i)"
+        (keydown)="onHandleKeyDown($event, i)"
+        (mousedown)="onMouseDown($event, i)">
+          <div class="handle-line" [style.background-color]="lineColor">
+            <span
+              *ngIf="pane.collapsible"
+              class="collapse-arrow bi"
+              [ngClass]="getCollapseIcon(pane)"
+              [style.color]="handleIconColor"
+              (click)="onHandleToggle($event, i)"
+              aria-hidden="true"
+            ></span>
+          </div>
+        </div>
       </ng-container>
     </div>
-  `,
-                }]
-        }], propDecorators: { panes: [{
+  `, styles: [":host{display:block;width:100%}.splitter-container{display:flex;height:100%;width:100%}.splitter-container.vertical{flex-direction:column}.splitbar{background:#ccc;width:5px;position:relative;align-items:center;justify-content:center;flex:0 0 auto;z-index:10}.splitbar.resizable{cursor:col-resize}.splitbar:hover{filter:brightness(90%)}.handle-line{border-radius:2px;opacity:.8;left:45%;position:absolute;top:45%;display:flex;align-items:center;justify-content:center}.splitter-container:not(.vertical) .handle-line{width:2px;height:10px}.pane-wrapper{position:relative;min-width:0;min-height:0;overflow:hidden;flex-shrink:1}.vertical .handle-line{height:2px;width:10px}.vertical .splitbar.resizable{cursor:row-resize}.splitter-container.vertical .splitter-container .splitbar.resizable{cursor:col-resize}.vertical .splitbar{width:100%}.collapse-btn{cursor:pointer;background:#666;width:10px;height:10px;position:absolute;top:50%}.collapse-arrow{font-size:.95rem;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;position:absolute;top:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { panes: [{
                 type: ContentChildren,
                 args: [NgbSplitterPaneComponent]
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { static: true }]
             }], orientation: [{
                 type: Input
             }], handleThickness: [{
                 type: Input
-            }], onWindowResize: [{
+            }], handleIconColor: [{
+                type: Input
+            }], verticalMinHeight: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], barColor: [{
+                type: Input
+            }], lineColor: [{
+                type: Input
+            }], onMouseMove: [{
                 type: HostListener,
-                args: ['window:resize']
+                args: ['window:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup']
+            }] } });
+
+class NgbChipsComponent {
+    items = [];
+    removable = true;
+    ariaLabel;
+    removeLabel;
+    remove = new EventEmitter();
+    trackById = (_, item) => item.id;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbChipsComponent, isStandalone: true, selector: "ngb-chips", inputs: { items: "items", removable: "removable", ariaLabel: "ariaLabel", removeLabel: "removeLabel" }, outputs: { remove: "remove" }, ngImport: i0, template: `
+    <div class="ngb-chips" [attr.aria-label]="ariaLabel">
+      <span
+        *ngFor="let item of items; trackBy: trackById"
+        class="badge rounded-pill bg-secondary ngb-chip"
+        [class.opacity-50]="!!item.disabled"
+      >
+        <span class="ngb-chip-label">{{ item.label }}</span>
+        <button
+          *ngIf="removable"
+          type="button"
+          class="ngb-chip-remove"
+          [disabled]="!!item.disabled"
+          (click)="remove.emit(item)"
+          [attr.aria-label]="removeLabel || 'Remove'"
+        >
+          &times;
+        </button>
+      </span>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.ngb-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.ngb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%}.ngb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngb-chip-remove{border:0;background:transparent;padding:0;line-height:1;cursor:pointer;font-size:1rem;opacity:.85}.ngb-chip-remove:disabled{cursor:default;opacity:.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngb-chips', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ngb-chips" [attr.aria-label]="ariaLabel">
+      <span
+        *ngFor="let item of items; trackBy: trackById"
+        class="badge rounded-pill bg-secondary ngb-chip"
+        [class.opacity-50]="!!item.disabled"
+      >
+        <span class="ngb-chip-label">{{ item.label }}</span>
+        <button
+          *ngIf="removable"
+          type="button"
+          class="ngb-chip-remove"
+          [disabled]="!!item.disabled"
+          (click)="remove.emit(item)"
+          [attr.aria-label]="removeLabel || 'Remove'"
+        >
+          &times;
+        </button>
+      </span>
+    </div>
+  `, styles: [":host{display:block}.ngb-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.ngb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%}.ngb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngb-chip-remove{border:0;background:transparent;padding:0;line-height:1;cursor:pointer;font-size:1rem;opacity:.85}.ngb-chip-remove:disabled{cursor:default;opacity:.4}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], removeLabel: [{
+                type: Input
+            }], remove: [{
+                type: Output
             }] } });
 
 class NgbTypeaheadComponent {
+    host;
+    cdr;
     data = [];
     debounceTime = 200;
     characterTyped = 1;
     limit = 10;
     selectExact = false;
     multiSelect = false;
-    i18n;
+    matchSelection = false;
+    showDropdownButton = false;
+    showClearButton = false;
+    updateOnBlur = false;
+    updateOnTab = true;
+    separator = ',';
+    chips = false;
+    // `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;
+    i18n;
+    projectedItemTemplate;
+    completeMethod = new EventEmitter();
+    onSelect = new EventEmitter();
+    onUnselect = new EventEmitter();
+    onAdd = new EventEmitter();
+    onFocus = new EventEmitter();
+    onBlur = new EventEmitter();
+    onDropdownClick = new EventEmitter();
+    onClear = new EventEmitter();
+    onInputKeydown = new EventEmitter();
+    onKeyUp = new EventEmitter();
+    onShow = new EventEmitter();
+    onHide = new EventEmitter();
+    onLazyLoad = new EventEmitter();
     selectedItems = new EventEmitter();
     selectionChange = new EventEmitter();
     onChange = new EventEmitter();
-    onScrollEvent = new EventEmitter();
+    onScrollEvent = new EventEmitter(); // legacy, kept for compatibility
     scroller;
     inputEl;
     itemButtons;
+    disabled = false;
     query = '';
     filtered = [];
     visible = [];
     selected = [];
+    overlayVisible = false;
+    openedByDropdown = false;
+    hasSearched = false;
+    activeIndex = -1;
+    inputFocused = false;
+    pointerDownInside = false;
+    lastFilterTerm = '';
+    keepOpenOnEmpty = false;
+    overlayId = `ngb-typeahead-overlay-${Math.random().toString(36).slice(2)}`;
     viewportHeight = 240;
     itemHeight = 40;
     beforePadding = 0;
     afterPadding = 0;
     debounceId;
+    onControlChange = () => { };
+    onControlTouched = () => { };
+    controlValue = null;
     ngAfterViewInit() {
+        // do not open overlay on init; just ensure viewport state is consistent
         this.applyFilter('');
     }
     ngOnChanges(changes) {
         if (changes['data'] && !changes['data'].firstChange) {
             this.applyFilter(this.query);
         }
+        if (changes['data'] && this.controlValue != null && !this.inputFocused && !this.overlayVisible) {
+            this.applyControlValue(this.controlValue);
+        }
     }
     ngOnDestroy() {
         if (this.debounceId) {
             clearTimeout(this.debounceId);
         }
     }
+    constructor(host, cdr) {
+        this.host = host;
+        this.cdr = cdr;
+    }
+    onDocumentMouseDown(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        const inside = this.host.nativeElement.contains(target);
+        this.pointerDownInside = inside;
+        if (inside)
+            return;
+        if (!this.overlayVisible)
+            return;
+        this.commitInputOnClose();
+        this.hideOverlay(event);
+    }
+    onDocumentFocusIn(event) {
+        if (!this.overlayVisible)
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        if (this.host.nativeElement.contains(target))
+            return;
+        this.commitInputOnClose();
+        this.hideOverlay(event);
+    }
+    get activeDescendantId() {
+        if (!this.overlayVisible)
+            return null;
+        if (this.activeIndex < 0 || this.activeIndex >= this.visible.length)
+            return null;
+        return this.getOptionId(this.activeIndex);
+    }
+    get showNoResults() {
+        return this.overlayVisible && this.hasSearched && this.filtered.length === 0;
+    }
+    get displayQuery() {
+        if (!this.multiSelect) {
+            return this.query;
+        }
+        if (this.chips) {
+            return this.query;
+        }
+        const term = (this.query || '').trim();
+        const prefix = this.selected.map((s) => s.label).join(', ');
+        if (!prefix) {
+            return this.query;
+        }
+        if (term) {
+            return `${prefix}, ${term}`;
+        }
+        return prefix;
+    }
     get selectionSummary() {
         if (!this.selected.length)
             return '';
@@ -2123,28 +2326,179 @@ class NgbTypeaheadComponent {
         const firstTwo = this.selected.slice(0, 2).map((s) => s.label).join(', ');
         return `${firstTwo} (+${this.selected.length - 2})`;
     }
+    get resolvedItemTemplate() {
+        return this.itemTemplate ?? this.projectedItemTemplate;
+    }
+    writeValue(value) {
+        this.controlValue = value;
+        this.applyControlValue(value);
+    }
+    applyControlValue(value) {
+        if (this.multiSelect) {
+            const asArray = Array.isArray(value) ? value : value == null ? [] : [value];
+            const next = asArray.map((v) => this.coerceToItem(v)).filter(Boolean);
+            const seen = new Set();
+            this.selected = next.filter((i) => (seen.has(i.id) ? false : (seen.add(i.id), true)));
+            this.query = '';
+            this.keepOpenOnEmpty = false;
+            this.applyFilter('');
+            this.cdr.markForCheck();
+            return;
+        }
+        if (value == null) {
+            this.selected = [];
+            this.query = '';
+            this.keepOpenOnEmpty = false;
+            this.applyFilter('');
+            this.cdr.markForCheck();
+            return;
+        }
+        const item = this.coerceToItem(value);
+        if (!item)
+            return;
+        this.selected = [item];
+        this.query = item.label;
+        if (this.inputEl?.nativeElement) {
+            this.inputEl.nativeElement.value = item.label;
+        }
+        this.keepOpenOnEmpty = false;
+        this.applyFilter(this.query);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (isDisabled) {
+            this.hideOverlay();
+        }
+        this.cdr.markForCheck();
+    }
     onInput(value) {
-        this.query = value;
+        if (this.disabled)
+            return;
+        this.keepOpenOnEmpty = false;
+        const trimmed = (value ?? '').trim();
+        if (!this.multiSelect && this.selected.length) {
+            const selectedLabel = (this.selected[0]?.label ?? '').trim();
+            if (trimmed.toLowerCase() !== selectedLabel.toLowerCase()) {
+                const previous = this.selected[0];
+                this.selected = [];
+                this.selectedItems.emit(this.selected);
+                this.selectionChange.emit(this.selected);
+                if (previous) {
+                    this.onUnselect.emit(previous);
+                }
+                this.propagateControlValue();
+            }
+        }
+        if (this.chips && this.multiSelect) {
+            const tokens = this.splitBySeparators(value);
+            if (tokens.tokensToAdd.length) {
+                for (const token of tokens.tokensToAdd) {
+                    this.addToken(token);
+                }
+            }
+            this.query = tokens.remaining;
+        }
+        else {
+            this.query = value;
+        }
         this.onChange.emit(value);
+        // Input events imply the user is interacting with the field; treat as focused so the overlay can open immediately.
+        this.inputFocused = true;
         if (this.debounceId)
             clearTimeout(this.debounceId);
         if (this.debounceTime <= 0) {
             this.applyFilter(value);
+            this.completeMethod.emit(value);
         }
         else {
-            this.debounceId = setTimeout(() => this.applyFilter(value), this.debounceTime);
+            this.debounceId = setTimeout(() => {
+                this.applyFilter(value);
+                this.completeMethod.emit(value);
+                this.cdr.markForCheck();
+            }, this.debounceTime);
         }
     }
+    onNativeInput(event) {
+        const target = event.target;
+        const value = target?.value ?? '';
+        if (this.multiSelect && !this.chips && this.selected.length) {
+            const prefix = this.selected.map((s) => s.label).join(', ');
+            const normalizedPrefix = prefix.trim();
+            if (normalizedPrefix && value.toLowerCase().startsWith(normalizedPrefix.toLowerCase())) {
+                let rest = value.slice(normalizedPrefix.length);
+                rest = rest.replace(/^[\s,]+/, '');
+                this.onInput(rest);
+                return;
+            }
+        }
+        this.onInput(value);
+    }
     onKeydown(event) {
+        if (this.disabled)
+            return;
+        this.onInputKeydown.emit(event);
+        if (this.chips && this.multiSelect && event.key === 'Tab' && this.updateOnTab) {
+            event.preventDefault();
+            this.addToken((this.query || '').trim());
+            this.focusInput();
+            return;
+        }
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
             event.preventDefault();
-            this.focusSibling(event.key === 'ArrowDown' ? 1 : -1);
+            this.moveActive(event.key === 'ArrowDown' ? 1 : -1);
         }
         else if (event.key === 'Enter') {
             event.preventDefault();
-            const first = this.visible[0];
-            if (first)
-                this.selectItem(first);
+            const active = this.visible[this.activeIndex] || this.visible[0];
+            if (active)
+                this.selectItem(active);
+        }
+        else if (event.key === 'Escape') {
+            if (this.overlayVisible) {
+                event.preventDefault();
+                this.hideOverlay(event);
+            }
+        }
+    }
+    onKeyup(event) {
+        this.onKeyUp.emit(event);
+    }
+    onInputFocus(event) {
+        if (this.disabled)
+            return;
+        this.onFocus.emit(event);
+        this.inputFocused = true;
+        if (this.multiSelect && !this.overlayVisible) {
+            // When multi-select is displaying the selection summary, start searching with a clean query.
+            this.query = '';
+            // After a multi-select session, re-opening the field should show the list again even with an empty query.
+            if (!this.chips && this.selected.length) {
+                this.keepOpenOnEmpty = true;
+                this.applyFilter('');
+                this.activatePreferredOption();
+                return;
+            }
+        }
+        // Opening behavior: only show overlay when threshold met, or dropdown button explicitly used.
+        if (this.query.length >= this.characterTyped) {
+            this.showOverlay(event);
+        }
+    }
+    onInputBlur(event) {
+        this.onBlur.emit(event);
+        this.onControlTouched();
+        this.inputFocused = false;
+        // Do not close on blur directly: scrolling/clicking within the overlay can blur the input.
+        // Closing/commit is handled by outside click (document:mousedown) and focus moving outside (document:focusin).
+        if (this.chips && this.multiSelect && this.updateOnBlur) {
+            this.addToken((this.query || '').trim());
         }
     }
     onScroll(event) {
@@ -2152,8 +2506,14 @@ class NgbTypeaheadComponent {
         const scrollTop = target.scrollTop;
         this.onScrollEvent.emit();
         this.updateViewport(scrollTop);
+        const remaining = target.scrollHeight - (target.scrollTop + target.clientHeight);
+        if (remaining < 48) {
+            this.onLazyLoad.emit();
+        }
     }
     selectItem(item) {
+        if (this.disabled)
+            return;
         if (!item || item.disabled)
             return;
         this.validateItem(item);
@@ -2161,29 +2521,118 @@ class NgbTypeaheadComponent {
             const exists = this.selected.find((s) => s.id === item.id);
             if (exists) {
                 this.selected = this.selected.filter((s) => s.id !== item.id);
+                this.onUnselect.emit(item);
             }
             else {
                 this.selected = [...this.selected, item];
+                this.onSelect.emit(item);
+            }
+            this.propagateControlValue();
+            // After selecting/unselecting, show the chosen values in the input and keep the panel open.
+            this.keepOpenOnEmpty = true;
+            if (this.chips) {
+                this.query = '';
+            }
+            else {
+                this.query = '';
             }
+            this.applyFilter('');
         }
         else {
+            if (this.selected.length && this.selected[0]?.id !== item.id) {
+                this.onUnselect.emit(this.selected[0]);
+            }
             this.selected = [item];
+            this.query = item.label;
+            if (this.inputEl?.nativeElement) {
+                this.inputEl.nativeElement.value = item.label;
+            }
+            this.onSelect.emit(item);
+            this.propagateControlValue();
+            this.hideOverlay();
         }
         this.selectedItems.emit(this.selected);
         this.selectionChange.emit(this.selected);
+        this.cdr.markForCheck();
+    }
+    focusInput() {
+        this.inputEl?.nativeElement?.focus();
+    }
+    removeSelected(item) {
+        if (this.disabled)
+            return;
+        if (!item)
+            return;
+        const exists = this.selected.find((s) => s.id === item.id);
+        if (!exists)
+            return;
+        this.selected = this.selected.filter((s) => s.id !== item.id);
+        this.onUnselect.emit(item);
+        this.propagateControlValue();
+        this.selectedItems.emit(this.selected);
+        this.selectionChange.emit(this.selected);
+        this.cdr.markForCheck();
     }
     clearSelection() {
+        const previous = [...this.selected];
         this.selected = [];
         this.selectedItems.emit(this.selected);
         this.selectionChange.emit(this.selected);
+        if (!this.multiSelect && previous[0]) {
+            this.onUnselect.emit(previous[0]);
+        }
+        this.propagateControlValue();
+        this.cdr.markForCheck();
     }
     isSelected(item) {
         return this.selected.some((s) => s.id === item.id);
     }
     trackById = (_, item) => item.id;
+    getOptionId(index) {
+        return `${this.overlayId}-opt-${index}`;
+    }
+    onDropdownButtonClick(event) {
+        if (this.disabled)
+            return;
+        this.onDropdownClick.emit(event);
+        if (this.overlayVisible) {
+            this.hideOverlay(event);
+            this.openedByDropdown = false;
+        }
+        else {
+            this.openedByDropdown = true;
+            if (this.scroller?.nativeElement) {
+                this.scroller.nativeElement.scrollTop = 0;
+            }
+            this.showOverlay(event, true);
+            // Show all items when the dropdown button is used, regardless of current query.
+            this.applyFilter('');
+            this.activatePreferredOption();
+        }
+        this.inputEl?.nativeElement.focus();
+        this.cdr.markForCheck();
+    }
+    onClearClick(event) {
+        if (this.disabled)
+            return;
+        this.onClear.emit(event);
+        this.query = '';
+        this.clearSelection();
+        this.applyFilter('');
+        this.hideOverlay(event);
+        this.inputEl?.nativeElement.focus();
+        this.cdr.markForCheck();
+    }
     applyFilter(value) {
         const term = (value || '').toLowerCase();
-        const meetsThreshold = term.length >= this.characterTyped;
+        if (term !== this.lastFilterTerm) {
+            this.lastFilterTerm = term;
+            if (this.scroller?.nativeElement) {
+                this.scroller.nativeElement.scrollTop = 0;
+            }
+        }
+        const meetsThreshold = term.length >= this.characterTyped || this.openedByDropdown || (this.multiSelect && this.keepOpenOnEmpty);
+        this.hasSearched = term.length >= this.characterTyped || this.openedByDropdown;
         const base = meetsThreshold ? this.data.filter((d) => (d.label || '').toLowerCase().includes(term)) : [];
         const limited = this.limit ? base.slice(0, this.limit) : base;
         this.filtered = limited;
@@ -2191,6 +2640,13 @@ class NgbTypeaheadComponent {
             this.selectItem(limited[0]);
         }
         this.updateViewport(this.scroller?.nativeElement.scrollTop || 0);
+        if (meetsThreshold && !this.overlayVisible && (this.inputFocused || this.openedByDropdown)) {
+            this.showOverlay();
+        }
+        if (!meetsThreshold && this.overlayVisible && !this.openedByDropdown) {
+            this.hideOverlay();
+        }
+        this.cdr.markForCheck();
     }
     updateViewport(scrollTop) {
         const total = this.filtered.length;
@@ -2200,140 +2656,454 @@ class NgbTypeaheadComponent {
         this.beforePadding = start * this.itemHeight;
         this.afterPadding = Math.max(total - end, 0) * this.itemHeight;
         this.visible = this.filtered.slice(start, end);
+        this.activeIndex = this.visible.length ? Math.min(this.activeIndex, this.visible.length - 1) : -1;
     }
-    focusSibling(direction) {
-        const buttons = this.scroller?.nativeElement.querySelectorAll('button.list-group-item');
-        if (!buttons || buttons.length === 0)
+    activatePreferredOption() {
+        if (!this.filtered.length || !this.scroller?.nativeElement) {
+            this.activeIndex = -1;
             return;
-        const active = document.activeElement;
-        const index = Array.prototype.indexOf.call(buttons, active);
-        const next = buttons[index + direction] || buttons[(index + direction + buttons.length) % buttons.length];
-        next?.focus();
+        }
+        const trimmed = (this.query || '').trim().toLowerCase();
+        let preferredIndex = -1;
+        if (trimmed) {
+            preferredIndex = this.filtered.findIndex((d) => (d.label || '').trim().toLowerCase() === trimmed);
+        }
+        if (preferredIndex === -1 && this.selected.length) {
+            const firstSelected = this.selected[0];
+            preferredIndex = this.filtered.findIndex((d) => d.id === firstSelected.id);
+        }
+        if (preferredIndex === -1) {
+            preferredIndex = 0;
+        }
+        const scrollTop = Math.max(0, preferredIndex * this.itemHeight - this.itemHeight);
+        this.scroller.nativeElement.scrollTop = scrollTop;
+        this.updateViewport(scrollTop);
+        const start = Math.max(Math.floor(scrollTop / this.itemHeight), 0);
+        this.activeIndex = Math.max(0, Math.min(preferredIndex - start, this.visible.length - 1));
+    }
+    moveActive(direction) {
+        if (!this.overlayVisible) {
+            this.showOverlay();
+        }
+        if (!this.visible.length)
+            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();
     }
     validateItem(item) {
-        if (this.itemTemplate) {
-            if (item.id == null || (item.value == null && item.value !== 0)) {
-                throw new Error('Custom templates require items to provide both id and value.');
+        if (item.id == null) {
+            throw new Error('Typeahead items must include an id.');
+        }
+    }
+    showOverlay(event, openedByDropdown = false) {
+        this.openedByDropdown = openedByDropdown;
+        if (this.overlayVisible)
+            return;
+        this.overlayVisible = true;
+        this.activeIndex = this.visible.length ? 0 : -1;
+        this.onShow.emit(event ?? new Event('show'));
+        this.cdr.markForCheck();
+    }
+    hideOverlay(event) {
+        if (!this.overlayVisible)
+            return;
+        this.overlayVisible = false;
+        this.openedByDropdown = false;
+        this.activeIndex = -1;
+        this.onHide.emit(event ?? new Event('hide'));
+        this.cdr.markForCheck();
+    }
+    commitInputOnClose() {
+        const trimmed = (this.query || '').trim();
+        if (!trimmed) {
+            return;
+        }
+        if (this.matchSelection) {
+            const exact = this.data.find((d) => (d.label || '').toLowerCase() === trimmed.toLowerCase());
+            if (!exact) {
+                this.query = '';
+                if (!this.multiSelect) {
+                    this.clearSelection();
+                }
+            }
+            else if (!this.multiSelect) {
+                this.selected = [exact];
+                this.selectionChange.emit(this.selected);
+                this.selectedItems.emit(this.selected);
+                this.propagateControlValue();
             }
+            return;
+        }
+        if (this.updateOnBlur && !this.multiSelect && this.selected.length === 0) {
+            const added = { id: trimmed, label: trimmed, value: trimmed };
+            this.selected = [added];
+            this.onAdd.emit(added);
+            this.selectionChange.emit(this.selected);
+            this.selectedItems.emit(this.selected);
+            this.propagateControlValue();
+        }
+    }
+    splitBySeparators(value) {
+        const separators = Array.isArray(this.separator) ? this.separator : [this.separator];
+        const safe = separators.filter((s) => s != null && `${s}`.length > 0).map((s) => `${s}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        if (!safe.length) {
+            return { tokensToAdd: [], remaining: value };
+        }
+        const regex = new RegExp(`(?:${safe.join('|')})`);
+        if (!regex.test(value)) {
+            return { tokensToAdd: [], remaining: value };
+        }
+        const parts = value.split(new RegExp(`(?:${safe.join('|')})`, 'g')).map((p) => p.trim());
+        const endsWithSeparator = separators.some((sep) => value.endsWith(sep));
+        const tokensToAdd = (endsWithSeparator ? parts : parts.slice(0, -1)).filter(Boolean);
+        const remaining = endsWithSeparator ? '' : (parts[parts.length - 1] || '');
+        return { tokensToAdd, remaining };
+    }
+    addToken(raw) {
+        const token = (raw || '').trim();
+        if (!this.chips || !this.multiSelect)
+            return;
+        if (!token)
+            return;
+        const match = this.data.find((d) => (d.label || '').trim().toLowerCase() === token.toLowerCase());
+        const item = match ?? { id: token, label: token, value: token };
+        if (this.matchSelection && !match) {
+            this.query = '';
+            return;
         }
+        if (this.selected.some((s) => s.id === item.id)) {
+            this.query = '';
+            return;
+        }
+        this.selected = [...this.selected, item];
+        this.onAdd.emit(item);
+        this.propagateControlValue();
+        this.selectedItems.emit(this.selected);
+        this.selectionChange.emit(this.selected);
+        this.query = '';
+        this.keepOpenOnEmpty = true;
+        this.applyFilter('');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTypeaheadComponent, deps: [], 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", i18n: "i18n" }, outputs: { selectedItems: "selectedItems", selectionChange: "selectionChange", onChange: "onChange", onScrollEvent: "onScrollEvent" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "itemButtons", predicate: ["itemButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="mb-2">
-      <input
-        #inputEl
-        type="text"
-        class="form-control"
-        [attr.placeholder]="i18n?.placeholder || 'Type to search'"
-        [ngModel]="query"
-        (ngModelChange)="onInput($event)"
-        (keydown)="onKeydown($event)"
-        aria-autocomplete="list"
-        role="combobox"
-        [attr.aria-expanded]="filtered.length > 0"
-      />
-    </div>
+    propagateControlValue() {
+        if (this.multiSelect) {
+            const next = this.selected.map((item) => (item.value !== undefined ? item.value : item));
+            this.controlValue = next;
+            this.onControlChange(next);
+            return;
+        }
+        const first = this.selected[0];
+        const next = first ? (first.value !== undefined ? first.value : first) : null;
+        this.controlValue = next;
+        this.onControlChange(next);
+    }
+    coerceToItem(value) {
+        if (value == null)
+            return null;
+        if (typeof value === 'object' && value.id != null && value.label != null) {
+            return value;
+        }
+        const match = this.data.find((d) => d.value === value || d.id === value || (d.label || '').toLowerCase() === `${value}`.toLowerCase());
+        if (match)
+            return match;
+        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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgbTypeaheadComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "projectedItemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "itemButtons", predicate: ["itemButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="typeahead-root">
+      <div class="input-group mb-2">
+        <ng-container *ngIf="chips && multiSelect; else plainInput">
+          <div class="form-control typeahead-chips-control" (click)="disabled ? null : focusInput()">
+            <ngb-chips
+              [items]="selected"
+              [removable]="true"
+              (remove)="removeSelected($event)"
+              ariaLabel="Selected items"
+            ></ngb-chips>
+            <input
+              #inputEl
+              type="text"
+              [disabled]="disabled"
+              [attr.placeholder]="selected.length ? '' : (i18n?.placeholder || 'Type to search')"
+              [value]="query"
+              (input)="onNativeInput($event)"
+              (focus)="onInputFocus($event)"
+              (blur)="onInputBlur($event)"
+              (keydown)="onKeydown($event)"
+              (keyup)="onKeyup($event)"
+              aria-autocomplete="list"
+              role="combobox"
+              [attr.aria-expanded]="overlayVisible"
+              [attr.aria-controls]="overlayId"
+              [attr.aria-activedescendant]="activeDescendantId"
+            />
+          </div>
+        </ng-container>
+        <ng-template #plainInput>
+          <input
+            #inputEl
+            type="text"
+            class="form-control"
+            [disabled]="disabled"
+            [attr.placeholder]="i18n?.placeholder || 'Type to search'"
+            [value]="displayQuery"
+            (input)="onNativeInput($event)"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            (keydown)="onKeydown($event)"
+            (keyup)="onKeyup($event)"
+            aria-autocomplete="list"
+            role="combobox"
+            [attr.aria-expanded]="overlayVisible"
+            [attr.aria-controls]="overlayId"
+            [attr.aria-activedescendant]="activeDescendantId"
+          />
+        </ng-template>
 
-    <div
-      #scroller
-      class="border rounded list-group"
-      style="max-height: 240px; overflow: auto;"
-      role="listbox"
-      (scroll)="onScroll($event)"
-    >
-      <div [style.height.px]="beforePadding"></div>
-      <button
-        *ngFor="let item of visible; trackBy: trackById"
-        type="button"
-        class="list-group-item list-group-item-action d-flex align-items-center justify-content-between"
-        [class.active]="isSelected(item)"
-        [attr.aria-selected]="isSelected(item)"
-        (click)="selectItem(item)"
-        [disabled]="item.disabled"
+        <button
+          *ngIf="showClearButton && (query || (!multiSelect && selected.length))"
+          type="button"
+          class="btn btn-outline-secondary"
+          (click)="onClearClick($event)"
+          [disabled]="disabled"
+          [attr.aria-label]="i18n?.clear || 'Clear'"
+        >
+          &times;
+        </button>
+
+        <button
+          *ngIf="showDropdownButton"
+          type="button"
+          class="btn btn-outline-secondary"
+          (click)="onDropdownButtonClick($event)"
+          [disabled]="disabled"
+          [attr.aria-label]="i18n?.dropdownButtonLabel || 'Toggle suggestions'"
+        >
+          &#9662;
+        </button>
+      </div>
+
+      <div
+        #scroller
+        class="dropdown-menu w-100 p-0 typeahead-panel"
+        [class.show]="overlayVisible"
+        [id]="overlayId"
+        role="listbox"
+        (scroll)="onScroll($event)"
       >
-        <ng-container *ngIf="itemTemplate; else defaultTpl" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
-        <ng-template #defaultTpl>
-          <span>{{ item.label }}</span>
-          <span *ngIf="multiSelect && isSelected(item)" class="badge bg-secondary">✓</span>
-        </ng-template>
-      </button>
-      <div [style.height.px]="afterPadding"></div>
+        <div [style.height.px]="beforePadding"></div>
 
-      <div *ngIf="!filtered.length" class="list-group-item text-muted text-center">
-        {{ i18n?.noResults || 'No results' }}
+        <button
+          *ngFor="let item of visible; trackBy: trackById; let idx = index"
+          type="button"
+          class="dropdown-item"
+          [class.active]="idx === activeIndex"
+          [class.fw-semibold]="isSelected(item)"
+          [attr.aria-selected]="isSelected(item)"
+          [attr.id]="getOptionId(idx)"
+          (click)="selectItem(item)"
+          [disabled]="item.disabled"
+        >
+          <div class="typeahead-item">
+            <span *ngIf="multiSelect" class="typeahead-item-checkbox">
+              <input
+                type="checkbox"
+                class="form-check-input m-0"
+                [checked]="isSelected(item)"
+                [disabled]="item.disabled"
+                tabindex="-1"
+                aria-hidden="true"
+              />
+            </span>
+            <ng-container *ngIf="resolvedItemTemplate as tpl; else defaultTpl">
+              <ng-container
+                [ngTemplateOutlet]="tpl"
+                [ngTemplateOutletContext]="{
+                  $implicit: item,
+                  item: item,
+                  query: query,
+                  selected: isSelected(item),
+                  index: idx
+                }"
+              ></ng-container>
+            </ng-container>
+            <ng-template #defaultTpl>
+              <span>{{ item.label }}</span>
+            </ng-template>
+          </div>
+        </button>
+
+        <div [style.height.px]="afterPadding"></div>
+
+        <div *ngIf="showNoResults" class="dropdown-item text-muted text-center">
+          {{ i18n?.noResults || 'No results' }}
+        </div>
       </div>
-    </div>
 
-    <div *ngIf="multiSelect && selected.length" class="mt-2 small text-muted">
-      {{ selectionSummary }}
-      <button type="button" class="btn btn-link btn-sm ps-1" (click)="clearSelection()">
-        {{ i18n?.clearSelection || 'Clear' }}
-      </button>
+      <div *ngIf="multiSelect && selected.length" class="mt-2 small text-muted">
+        {{ selectionSummary }}
+        <button type="button" class="btn btn-link btn-sm ps-1" (click)="clearSelection()">
+          {{ i18n?.clearSelection || 'Clear' }}
+        </button>
+      </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.typeahead-root{position:relative}.typeahead-chips-control{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem}.typeahead-chips-control input{border:0;outline:0;flex:1 1 9rem;min-width:6rem;padding:0;margin:0;background:transparent}.typeahead-chips-control input:focus{outline:0;box-shadow:none}.typeahead-panel{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1050;max-height:240px;overflow:auto;opacity:0;transform:translateY(-.25rem);pointer-events:none;transition:opacity .12s ease,transform .12s ease}.typeahead-panel.show{opacity:1;transform:translateY(0);pointer-events:auto}.typeahead-item{display:flex;align-items:center;gap:.5rem}.typeahead-item-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgbChipsComponent, selector: "ngb-chips", inputs: ["items", "removable", "ariaLabel", "removeLabel"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTypeaheadComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ngb-typeahead',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <div class="mb-2">
-      <input
-        #inputEl
-        type="text"
-        class="form-control"
-        [attr.placeholder]="i18n?.placeholder || 'Type to search'"
-        [ngModel]="query"
-        (ngModelChange)="onInput($event)"
-        (keydown)="onKeydown($event)"
-        aria-autocomplete="list"
-        role="combobox"
-        [attr.aria-expanded]="filtered.length > 0"
-      />
-    </div>
+            args: [{ selector: 'ngb-typeahead', standalone: true, imports: [CommonModule, NgbChipsComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgbTypeaheadComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="typeahead-root">
+      <div class="input-group mb-2">
+        <ng-container *ngIf="chips && multiSelect; else plainInput">
+          <div class="form-control typeahead-chips-control" (click)="disabled ? null : focusInput()">
+            <ngb-chips
+              [items]="selected"
+              [removable]="true"
+              (remove)="removeSelected($event)"
+              ariaLabel="Selected items"
+            ></ngb-chips>
+            <input
+              #inputEl
+              type="text"
+              [disabled]="disabled"
+              [attr.placeholder]="selected.length ? '' : (i18n?.placeholder || 'Type to search')"
+              [value]="query"
+              (input)="onNativeInput($event)"
+              (focus)="onInputFocus($event)"
+              (blur)="onInputBlur($event)"
+              (keydown)="onKeydown($event)"
+              (keyup)="onKeyup($event)"
+              aria-autocomplete="list"
+              role="combobox"
+              [attr.aria-expanded]="overlayVisible"
+              [attr.aria-controls]="overlayId"
+              [attr.aria-activedescendant]="activeDescendantId"
+            />
+          </div>
+        </ng-container>
+        <ng-template #plainInput>
+          <input
+            #inputEl
+            type="text"
+            class="form-control"
+            [disabled]="disabled"
+            [attr.placeholder]="i18n?.placeholder || 'Type to search'"
+            [value]="displayQuery"
+            (input)="onNativeInput($event)"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            (keydown)="onKeydown($event)"
+            (keyup)="onKeyup($event)"
+            aria-autocomplete="list"
+            role="combobox"
+            [attr.aria-expanded]="overlayVisible"
+            [attr.aria-controls]="overlayId"
+            [attr.aria-activedescendant]="activeDescendantId"
+          />
+        </ng-template>
 
-    <div
-      #scroller
-      class="border rounded list-group"
-      style="max-height: 240px; overflow: auto;"
-      role="listbox"
-      (scroll)="onScroll($event)"
-    >
-      <div [style.height.px]="beforePadding"></div>
-      <button
-        *ngFor="let item of visible; trackBy: trackById"
-        type="button"
-        class="list-group-item list-group-item-action d-flex align-items-center justify-content-between"
-        [class.active]="isSelected(item)"
-        [attr.aria-selected]="isSelected(item)"
-        (click)="selectItem(item)"
-        [disabled]="item.disabled"
+        <button
+          *ngIf="showClearButton && (query || (!multiSelect && selected.length))"
+          type="button"
+          class="btn btn-outline-secondary"
+          (click)="onClearClick($event)"
+          [disabled]="disabled"
+          [attr.aria-label]="i18n?.clear || 'Clear'"
+        >
+          &times;
+        </button>
+
+        <button
+          *ngIf="showDropdownButton"
+          type="button"
+          class="btn btn-outline-secondary"
+          (click)="onDropdownButtonClick($event)"
+          [disabled]="disabled"
+          [attr.aria-label]="i18n?.dropdownButtonLabel || 'Toggle suggestions'"
+        >
+          &#9662;
+        </button>
+      </div>
+
+      <div
+        #scroller
+        class="dropdown-menu w-100 p-0 typeahead-panel"
+        [class.show]="overlayVisible"
+        [id]="overlayId"
+        role="listbox"
+        (scroll)="onScroll($event)"
       >
-        <ng-container *ngIf="itemTemplate; else defaultTpl" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
-        <ng-template #defaultTpl>
-          <span>{{ item.label }}</span>
-          <span *ngIf="multiSelect && isSelected(item)" class="badge bg-secondary">✓</span>
-        </ng-template>
-      </button>
-      <div [style.height.px]="afterPadding"></div>
+        <div [style.height.px]="beforePadding"></div>
 
-      <div *ngIf="!filtered.length" class="list-group-item text-muted text-center">
-        {{ i18n?.noResults || 'No results' }}
+        <button
+          *ngFor="let item of visible; trackBy: trackById; let idx = index"
+          type="button"
+          class="dropdown-item"
+          [class.active]="idx === activeIndex"
+          [class.fw-semibold]="isSelected(item)"
+          [attr.aria-selected]="isSelected(item)"
+          [attr.id]="getOptionId(idx)"
+          (click)="selectItem(item)"
+          [disabled]="item.disabled"
+        >
+          <div class="typeahead-item">
+            <span *ngIf="multiSelect" class="typeahead-item-checkbox">
+              <input
+                type="checkbox"
+                class="form-check-input m-0"
+                [checked]="isSelected(item)"
+                [disabled]="item.disabled"
+                tabindex="-1"
+                aria-hidden="true"
+              />
+            </span>
+            <ng-container *ngIf="resolvedItemTemplate as tpl; else defaultTpl">
+              <ng-container
+                [ngTemplateOutlet]="tpl"
+                [ngTemplateOutletContext]="{
+                  $implicit: item,
+                  item: item,
+                  query: query,
+                  selected: isSelected(item),
+                  index: idx
+                }"
+              ></ng-container>
+            </ng-container>
+            <ng-template #defaultTpl>
+              <span>{{ item.label }}</span>
+            </ng-template>
+          </div>
+        </button>
+
+        <div [style.height.px]="afterPadding"></div>
+
+        <div *ngIf="showNoResults" class="dropdown-item text-muted text-center">
+          {{ i18n?.noResults || 'No results' }}
+        </div>
       </div>
-    </div>
 
-    <div *ngIf="multiSelect && selected.length" class="mt-2 small text-muted">
-      {{ selectionSummary }}
-      <button type="button" class="btn btn-link btn-sm ps-1" (click)="clearSelection()">
-        {{ i18n?.clearSelection || 'Clear' }}
-      </button>
+      <div *ngIf="multiSelect && selected.length" class="mt-2 small text-muted">
+        {{ selectionSummary }}
+        <button type="button" class="btn btn-link btn-sm ps-1" (click)="clearSelection()">
+          {{ i18n?.clearSelection || 'Clear' }}
+        </button>
+      </div>
     </div>
-  `,
-                }]
-        }], propDecorators: { data: [{
+  `, styles: [":host{display:block}.typeahead-root{position:relative}.typeahead-chips-control{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem}.typeahead-chips-control input{border:0;outline:0;flex:1 1 9rem;min-width:6rem;padding:0;margin:0;background:transparent}.typeahead-chips-control input:focus{outline:0;box-shadow:none}.typeahead-panel{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1050;max-height:240px;overflow:auto;opacity:0;transform:translateY(-.25rem);pointer-events:none;transition:opacity .12s ease,transform .12s ease}.typeahead-panel.show{opacity:1;transform:translateY(0);pointer-events:auto}.typeahead-item{display:flex;align-items:center;gap:.5rem}.typeahead-item-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
                 type: Input
             }], debounceTime: [{
                 type: Input
@@ -2345,11 +3115,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], multiSelect: [{
                 type: Input
-            }], i18n: [{
+            }], matchSelection: [{
+                type: Input
+            }], showDropdownButton: [{
+                type: Input
+            }], showClearButton: [{
+                type: Input
+            }], updateOnBlur: [{
+                type: Input
+            }], updateOnTab: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], chips: [{
                 type: Input
             }], itemTemplate: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], projectedItemTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
+            }], completeMethod: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }], onUnselect: [{
+                type: Output
+            }], onAdd: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onDropdownClick: [{
+                type: Output
+            }], onClear: [{
+                type: Output
+            }], onInputKeydown: [{
+                type: Output
+            }], onKeyUp: [{
+                type: Output
+            }], onShow: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], onLazyLoad: [{
+                type: Output
             }], selectedItems: [{
                 type: Output
             }], selectionChange: [{
@@ -2363,10 +3175,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['scroller', { static: true }]
             }], inputEl: [{
                 type: ViewChild,
-                args: ['inputEl', { static: true }]
+                args: ['inputEl']
             }], itemButtons: [{
                 type: ViewChildren,
                 args: ['itemButton']
+            }], onDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }], onDocumentFocusIn: [{
+                type: HostListener,
+                args: ['document:focusin', ['$event']]
             }] } });
 
 class NgbTreeComponent {
@@ -2374,6 +3192,10 @@ class NgbTreeComponent {
     type = 'text';
     showCheckbox = false;
     i18n;
+    expandIcon = 'bi-caret-right-fill';
+    collapseIcon = 'bi-caret-down-fill';
+    plusIcon = 'bi-file-plus-fill';
+    minusIcon = 'bi-file-minus-fill';
     expand = new EventEmitter();
     collapse = new EventEmitter();
     expandAll = new EventEmitter();
@@ -2454,7 +3276,7 @@ class NgbTreeComponent {
         return acc;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbTreeComponent, isStandalone: true, selector: "ngb-tree", inputs: { nodes: "nodes", type: "type", showCheckbox: "showCheckbox", i18n: "i18n" }, outputs: { expand: "expand", collapse: "collapse", expandAll: "expandAll", collapseAll: "collapseAll", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "nodeButtons", predicate: ["nodeBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbTreeComponent, isStandalone: true, selector: "ngb-tree", inputs: { nodes: "nodes", type: "type", showCheckbox: "showCheckbox", i18n: "i18n", expandIcon: "expandIcon", collapseIcon: "collapseIcon", plusIcon: "plusIcon", minusIcon: "minusIcon" }, outputs: { expand: "expand", collapse: "collapse", expandAll: "expandAll", collapseAll: "collapseAll", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "nodeButtons", predicate: ["nodeBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     <div class="d-flex gap-2 mb-2">
       <button type="button" class="btn btn-sm btn-outline-secondary" (click)="expandAllNodes()" [attr.aria-label]="i18n?.expandAll || 'Expand all'">
         {{ i18n?.expandAll || 'Expand all' }}
@@ -2477,21 +3299,22 @@ class NgbTreeComponent {
         [attr.aria-expanded]="hasChildren(node) ? !!node.expanded : null"
         [attr.aria-level]="level"
       >
-        <button
-          #nodeBtn
-          type="button"
-          class="btn btn-sm btn-link px-1"
-          [disabled]="!hasChildren(node)"
-          (click)="toggleNode(node)"
-          (keydown)="onNodeKeydown($event, node)"
-          [attr.aria-label]="(node.expanded ? i18n?.collapse || 'Collapse' : i18n?.expand || 'Expand') + ' ' + node.label"
-        >
-          <span *ngIf="hasChildren(node)">
-            <span *ngIf="type === 'json'">{{ node.expanded ? '-' : '+' }}</span>
-            <span *ngIf="type !== 'json'">{{ node.expanded ? '▾' : '▸' }}</span>
-          </span>
-          <span *ngIf="!hasChildren(node)" class="text-muted">•</span>
-        </button>
+        <ng-container *ngIf="hasChildren(node); else leafSpacer">
+          <button
+            #nodeBtn
+            type="button"
+            class="btn btn-sm px-1"
+            (click)="toggleNode(node)"
+            (keydown)="onNodeKeydown($event, node)"
+            [attr.aria-label]="(node.expanded ? i18n?.collapse || 'Collapse' : i18n?.expand || 'Expand') + ' ' + node.label"
+          >
+            <span *ngIf="type === 'json'" class="bi" [ngClass]="node.expanded ? minusIcon : plusIcon" aria-hidden="true"></span>
+            <span *ngIf="type !== 'json'" class="bi" [ngClass]="node.expanded ? collapseIcon : expandIcon" aria-hidden="true"></span>
+          </button>
+        </ng-container>
+        <ng-template #leafSpacer>
+          <span class="d-inline-block px-1" style="width: 1.5rem;"></span>
+        </ng-template>
 
         <label class="form-check d-inline-flex align-items-center gap-2 flex-grow-1 mb-0">
           <input
@@ -2517,7 +3340,7 @@ class NgbTreeComponent {
         </ng-container>
       </ul>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTreeComponent, decorators: [{
             type: Component,
@@ -2549,21 +3372,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         [attr.aria-expanded]="hasChildren(node) ? !!node.expanded : null"
         [attr.aria-level]="level"
       >
-        <button
-          #nodeBtn
-          type="button"
-          class="btn btn-sm btn-link px-1"
-          [disabled]="!hasChildren(node)"
-          (click)="toggleNode(node)"
-          (keydown)="onNodeKeydown($event, node)"
-          [attr.aria-label]="(node.expanded ? i18n?.collapse || 'Collapse' : i18n?.expand || 'Expand') + ' ' + node.label"
-        >
-          <span *ngIf="hasChildren(node)">
-            <span *ngIf="type === 'json'">{{ node.expanded ? '-' : '+' }}</span>
-            <span *ngIf="type !== 'json'">{{ node.expanded ? '▾' : '▸' }}</span>
-          </span>
-          <span *ngIf="!hasChildren(node)" class="text-muted">•</span>
-        </button>
+        <ng-container *ngIf="hasChildren(node); else leafSpacer">
+          <button
+            #nodeBtn
+            type="button"
+            class="btn btn-sm px-1"
+            (click)="toggleNode(node)"
+            (keydown)="onNodeKeydown($event, node)"
+            [attr.aria-label]="(node.expanded ? i18n?.collapse || 'Collapse' : i18n?.expand || 'Expand') + ' ' + node.label"
+          >
+            <span *ngIf="type === 'json'" class="bi" [ngClass]="node.expanded ? minusIcon : plusIcon" aria-hidden="true"></span>
+            <span *ngIf="type !== 'json'" class="bi" [ngClass]="node.expanded ? collapseIcon : expandIcon" aria-hidden="true"></span>
+          </button>
+        </ng-container>
+        <ng-template #leafSpacer>
+          <span class="d-inline-block px-1" style="width: 1.5rem;"></span>
+        </ng-template>
 
         <label class="form-check d-inline-flex align-items-center gap-2 flex-grow-1 mb-0">
           <input
@@ -2599,6 +3423,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], i18n: [{
                 type: Input
+            }], expandIcon: [{
+                type: Input
+            }], collapseIcon: [{
+                type: Input
+            }], plusIcon: [{
+                type: Input
+            }], minusIcon: [{
+                type: Input
             }], expand: [{
                 type: Output
             }], collapse: [{
@@ -2620,5 +3452,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DATAGRID_TEMPLATE_DIRECTIVES, DND_I18N, DND_LIVE_ANNOUNCE, Datagrid, ExcelExportAdapter, ExportButtonDirective, JsPdfAdapter, NgbCellTemplate, NgbDndItemDirective, NgbDndListDirective, NgbDndState, NgbEditorTemplate, NgbExportService, NgbFilterTemplate, NgbGlobalFilterTemplate, NgbLiveAnnouncer, NgbPaginationComponent, NgbRowDetailTemplate, NgbSplitterComponent, NgbStepLabelDirective, NgbStepperComponent, NgbTreeComponent, NgbTypeaheadComponent, PdfExportAdapter, XlsxAdapter, defaultDndI18n };
+export { DATAGRID_TEMPLATE_DIRECTIVES, DND_I18N, DND_LIVE_ANNOUNCE, Datagrid, ExcelExportAdapter, ExportButtonDirective, JsPdfAdapter, NgbCellTemplate, NgbChipsComponent, NgbDndItemDirective, NgbDndListDirective, NgbDndState, NgbEditorTemplate, NgbExportService, NgbFilterTemplate, NgbGlobalFilterTemplate, NgbLiveAnnouncer, NgbPaginationComponent, NgbRowDetailTemplate, NgbSplitterComponent, NgbSplitterPaneComponent, NgbStepLabelDirective, NgbStepperComponent, NgbTreeComponent, NgbTypeaheadComponent, PdfExportAdapter, XlsxAdapter, defaultDndI18n };
 //# sourceMappingURL=angular-bootstrap-ngbootstrap.mjs.map