ng-primitives 0.44.0 → 0.45.0

package/combobox/combobox/combobox-state.d.ts

@@ -19,12 +19,13 @@ export declare const injectComboboxState: <U = {
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
     readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
-    readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
+    readonly placement: import("@angular/core").InputSignal<import("@floating-ui/dom").Placement>;
     readonly input: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxInput | undefined>;
     readonly button: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxButton | undefined>;
     readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
     readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
     readonly options: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxOption[]>;
+    readonly overlay: import("@angular/core").Signal<import("ng-primitives/portal").NgpOverlay<void> | null | undefined>;
     readonly open: import("@angular/core").Signal<boolean>;
     readonly activeDescendantManager: {
         activeDescendant: import("@angular/core").Signal<string | undefined>;
@@ -37,7 +38,7 @@ export declare const injectComboboxState: <U = {
         reset: () => void;
     };
     readonly state: import("ng-primitives/state").CreatedState<NgpCombobox>;
-    openDropdown: () => void;
+    openDropdown: () => Promise<void>;
     closeDropdown: () => void;
     toggleDropdown: () => void;
     selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;

package/combobox/combobox/combobox.d.ts

@@ -1,5 +1,6 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Injector } from '@angular/core';
+import { Placement } from '@floating-ui/dom';
 import type { NgpComboboxButton } from '../combobox-button/combobox-button';
 import type { NgpComboboxDropdown } from '../combobox-dropdown/combobox-dropdown';
 import type { NgpComboboxInput } from '../combobox-input/combobox-input';
@@ -36,7 +37,7 @@ export declare class NgpCombobox {
     /** The comparator function used to compare options. */
     readonly compareWith: import("@angular/core").InputSignal<(a: T | undefined, b: T | undefined) => boolean>;
     /** The position of the dropdown. */
-    readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
+    readonly placement: import("@angular/core").InputSignal<Placement>;
     /**
      * Store the combobox input
      * @internal
@@ -62,6 +63,11 @@ export declare class NgpCombobox {
      * @internal
      */
     readonly options: import("@angular/core").WritableSignal<NgpComboboxOption[]>;
+    /**
+     * Access the overlay
+     * @internal
+     */
+    readonly overlay: import("@angular/core").Signal<import("ng-primitives/portal").NgpOverlay<void> | null | undefined>;
     /**
      * The open state of the combobox.
      * @internal
@@ -88,7 +94,7 @@ export declare class NgpCombobox {
      * Open the dropdown.
      * @internal
      */
-    openDropdown(): void;
+    openDropdown(): Promise<void>;
     /**
      * Close the dropdown.
      * @internal
@@ -171,6 +177,6 @@ export declare class NgpCombobox {
      */
     unregisterOption(option: NgpComboboxOption): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpCombobox, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpCombobox, "[ngpCombobox]", ["ngpCombobox"], { "value": { "alias": "ngpComboboxValue"; "required": false; "isSignal": true; }; "multiple": { "alias": "ngpComboboxMultiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpComboboxDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpComboboxCompareWith"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "ngpComboboxDropdownPosition"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpComboboxValueChange"; "openChange": "ngpComboboxOpenChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpCombobox, "[ngpCombobox]", ["ngpCombobox"], { "value": { "alias": "ngpComboboxValue"; "required": false; "isSignal": true; }; "multiple": { "alias": "ngpComboboxMultiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpComboboxDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpComboboxCompareWith"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpComboboxDropdownPlacement"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpComboboxValueChange"; "openChange": "ngpComboboxOpenChange"; }, never, never, true, never>;
 }
 export {};

package/combobox/combobox-button/combobox-button.d.ts

@@ -10,12 +10,13 @@ export declare class NgpComboboxButton {
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
         readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
-        readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
+        readonly placement: import("@angular/core").InputSignal<import("@floating-ui/dom").Placement>;
         readonly input: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxInput | undefined>;
         readonly button: import("@angular/core").WritableSignal<NgpComboboxButton | undefined>;
         readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
         readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
         readonly options: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxOption[]>;
+        readonly overlay: import("@angular/core").Signal<import("ng-primitives/portal").NgpOverlay<void> | null | undefined>;
         readonly open: import("@angular/core").Signal<boolean>;
         readonly activeDescendantManager: {
             activeDescendant: import("@angular/core").Signal<string | undefined>;
@@ -28,7 +29,7 @@ export declare class NgpComboboxButton {
             reset: () => void;
         };
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
-        openDropdown: () => void;
+        openDropdown: () => Promise<void>;
         closeDropdown: () => void;
         toggleDropdown: () => void;
         selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;

package/combobox/combobox-dropdown/combobox-dropdown.d.ts

@@ -1,7 +1,57 @@
 import * as i0 from "@angular/core";
+import * as i1 from "ng-primitives/internal";
 export declare class NgpComboboxDropdown {
     /** Access the combobox state. */
-    private readonly state;
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
+        readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
+        readonly injector: import("@angular/core").Injector;
+        readonly value: import("@angular/core").InputSignal<any>;
+        readonly valueChange: import("@angular/core").OutputEmitterRef<any>;
+        readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+        readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+        readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
+        readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
+        readonly placement: import("@angular/core").InputSignal<import("@floating-ui/dom").Placement>;
+        readonly input: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxInput | undefined>;
+        readonly button: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxButton | undefined>;
+        readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
+        readonly dropdown: import("@angular/core").WritableSignal<NgpComboboxDropdown | undefined>;
+        readonly options: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxOption[]>;
+        readonly overlay: import("@angular/core").Signal<import("ng-primitives/portal").NgpOverlay<void> | null | undefined>;
+        readonly open: import("@angular/core").Signal<boolean>;
+        readonly activeDescendantManager: {
+            activeDescendant: import("@angular/core").Signal<string | undefined>;
+            activeItem: import("@angular/core").Signal<import("ng-primitives/combobox").NgpComboboxOption | undefined>;
+            activate: (item: import("ng-primitives/combobox").NgpComboboxOption | undefined) => void;
+            first: () => void;
+            last: () => void;
+            next: () => void;
+            previous: () => void;
+            reset: () => void;
+        };
+        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
+        openDropdown: () => Promise<void>;
+        closeDropdown: () => void;
+        toggleDropdown: () => void;
+        selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
+        deselectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
+        toggleOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
+        isOptionSelected: (option: import("ng-primitives/combobox").NgpComboboxOption) => boolean;
+        activateNextOption: () => void;
+        activatePreviousOption: () => void;
+        registerPortal: (portal: import("ng-primitives/combobox").NgpComboboxPortal) => void;
+        registerInput: (input: import("ng-primitives/combobox").NgpComboboxInput) => void;
+        registerButton: (button: import("ng-primitives/combobox").NgpComboboxButton) => void;
+        registerDropdown: (dropdown: NgpComboboxDropdown) => void;
+        registerOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
+        unregisterOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
+    }>>;
+    /** The dimensions of the combobox. */
+    protected readonly comboboxDimensions: import("@angular/core").Signal<import("ng-primitives/resize").Dimensions>;
+    /** The dimensions of the combobox. */
+    protected readonly inputDimensions: import("@angular/core").Signal<import("ng-primitives/resize").Dimensions>;
+    /** Store the combobox button dimensions. */
+    protected readonly buttonDimensions: import("@angular/core").Signal<import("ng-primitives/resize").Dimensions>;
     /**
      * Access the element reference.
      * @internal
@@ -11,5 +61,5 @@ export declare class NgpComboboxDropdown {
     readonly id: import("@angular/core").InputSignal<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxDropdown, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxDropdown, "[ngpComboboxDropdown]", ["ngpComboboxDropdown"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxDropdown, "[ngpComboboxDropdown]", ["ngpComboboxDropdown"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpExitAnimation; inputs: {}; outputs: {}; }]>;
 }

package/combobox/combobox-input/combobox-input.d.ts

@@ -11,12 +11,13 @@ export declare class NgpComboboxInput {
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
         readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
-        readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
+        readonly placement: import("@angular/core").InputSignal<import("@floating-ui/dom").Placement>;
         readonly input: import("@angular/core").WritableSignal<NgpComboboxInput | undefined>;
         readonly button: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxButton | undefined>;
         readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
         readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
         readonly options: import("@angular/core").WritableSignal<NgpComboboxOption[]>;
+        readonly overlay: import("@angular/core").Signal<import("ng-primitives/portal").NgpOverlay<void> | null | undefined>;
         readonly open: import("@angular/core").Signal<boolean>;
         readonly activeDescendantManager: {
             activeDescendant: import("@angular/core").Signal<string | undefined>;
@@ -29,7 +30,7 @@ export declare class NgpComboboxInput {
             reset: () => void;
         };
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
-        openDropdown: () => void;
+        openDropdown: () => Promise<void>;
         closeDropdown: () => void;
         toggleDropdown: () => void;
         selectOption: (option: NgpComboboxOption) => void;

package/combobox/combobox-option/combobox-option.d.ts

@@ -13,12 +13,13 @@ export declare class NgpComboboxOption implements OnInit, OnDestroy, NgpActivata
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
         readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
         readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
-        readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
+        readonly placement: import("@angular/core").InputSignal<import("@floating-ui/dom").Placement>;
         readonly input: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxInput | undefined>;
         readonly button: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxButton | undefined>;
         readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
         readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
         readonly options: import("@angular/core").WritableSignal<NgpComboboxOption[]>;
+        readonly overlay: import("@angular/core").Signal<import("ng-primitives/portal").NgpOverlay<void> | null | undefined>;
         readonly open: import("@angular/core").Signal<boolean>;
         readonly activeDescendantManager: {
             activeDescendant: import("@angular/core").Signal<string | undefined>;
@@ -31,7 +32,7 @@ export declare class NgpComboboxOption implements OnInit, OnDestroy, NgpActivata
             reset: () => void;
         };
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
-        openDropdown: () => void;
+        openDropdown: () => Promise<void>;
         closeDropdown: () => void;
         toggleDropdown: () => void;
         selectOption: (option: NgpComboboxOption) => void;

package/combobox/combobox-portal/combobox-portal.d.ts

@@ -1,35 +1,18 @@
 import { OnDestroy } from '@angular/core';
-import { NgpPortal } from 'ng-primitives/portal';
+import { NgpOverlay } from 'ng-primitives/portal';
 import * as i0 from "@angular/core";
 export declare class NgpComboboxPortal implements OnDestroy {
     /** Access the combobox state. */
     private readonly state;
     /** Access the template reference. */
     private readonly templateRef;
-    /** Access the view container reference. */
-    private readonly viewContainerRef;
     /** Access the injector. */
     private readonly injector;
-    /** Access the document. */
-    private readonly document;
     /**
-     * Store the embedded view reference.
+     * The overlay that manages the popover
      * @internal
      */
-    readonly viewRef: import("@angular/core").WritableSignal<NgpPortal | null>;
-    /** Store the dispose function. */
-    private dispose;
-    /** The position of the dropdown. */
-    readonly position: import("@angular/core").WritableSignal<{
-        x: number;
-        y: number;
-    }>;
-    /** The dimensions of the combobox. */
-    private readonly comboboxDimensions;
-    /** The dimensions of the combobox. */
-    private readonly inputDimensions;
-    /** Store the combobox button dimensions. */
-    private readonly buttonDimensions;
+    readonly overlay: import("@angular/core").WritableSignal<NgpOverlay<void> | null>;
     constructor();
     /** Cleanup the portal. */
     ngOnDestroy(): void;
@@ -37,12 +20,16 @@ export declare class NgpComboboxPortal implements OnDestroy {
      * Attach the portal.
      * @internal
      */
-    attach(): void;
+    show(): Promise<void>;
     /**
      * Detach the portal.
      * @internal
      */
     detach(): Promise<void>;
+    /**
+     * Create the overlay that will contain the dropdown
+     */
+    private createOverlay;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxPortal, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxPortal, "[ngpComboboxPortal]", ["ngpComboboxPortal"], {}, {}, never, never, true, never>;
 }

package/example-theme/index.css

@@ -42,6 +42,7 @@
   --ngp-text-red: #ef4444;
 
   --ngp-shadow: 0 1px 2px 0 rgba(0 0 0 0.05);
+  --ngp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --ngp-shadow-border: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 
   --ngp-focus-ring: rgb(59 130 246);

package/fesm2022/ng-primitives-combobox.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, Directive, computed, HostListener, booleanAttribute, inject, TemplateRef, ViewContainerRef, Injector, signal, effect, output, afterNextRender } from '@angular/core';
-import { injectElementRef, setupInteractions, explicitEffect } from 'ng-primitives/internal';
+import { input, Directive, computed, HostListener, booleanAttribute, inject, TemplateRef, Injector, signal, output, afterNextRender } from '@angular/core';
+import * as i1 from 'ng-primitives/internal';
+import { injectElementRef, NgpExitAnimation, setupInteractions, explicitEffect, provideExitAnimationManager } from 'ng-primitives/internal';
+import { observeResize } from 'ng-primitives/resize';
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { DOCUMENT } from '@angular/common';
-import { flip, autoUpdate, computePosition } from '@floating-ui/dom';
-import { createPortal } from 'ng-primitives/portal';
-import { observeResize } from 'ng-primitives/resize';
+import { createOverlay } from 'ng-primitives/portal';
 import { activeDescendantManager } from 'ng-primitives/a11y';
 
 /**
@@ -30,6 +29,12 @@ class NgpComboboxDropdown {
     constructor() {
         /** Access the combobox state. */
         this.state = injectComboboxState();
+        /** The dimensions of the combobox. */
+        this.comboboxDimensions = observeResize(() => this.state().elementRef.nativeElement);
+        /** The dimensions of the combobox. */
+        this.inputDimensions = observeResize(() => this.state().input()?.elementRef.nativeElement);
+        /** Store the combobox button dimensions. */
+        this.buttonDimensions = observeResize(() => this.state().button()?.elementRef.nativeElement);
         /**
          * Access the element reference.
          * @internal
@@ -40,16 +45,23 @@ class NgpComboboxDropdown {
         this.state().registerDropdown(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxDropdown, isStandalone: true, selector: "[ngpComboboxDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()" } }, exportAs: ["ngpComboboxDropdown"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxDropdown, isStandalone: true, selector: "[ngpComboboxDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()", "style.left.px": "state().overlay()?.position()?.x", "style.top.px": "state().overlay()?.position()?.y", "style.--ngp-combobox-transform-origin": "state().overlay()?.transformOrigin()", "style.--ngp-combobox-width.px": "comboboxDimensions().width", "style.--ngp-combobox-input-width.px": "inputDimensions().width", "style.--ngp-combobox-button-width.px": "buttonDimensions().width" } }, exportAs: ["ngpComboboxDropdown"], hostDirectives: [{ directive: i1.NgpExitAnimation }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxDropdown]',
                     exportAs: 'ngpComboboxDropdown',
+                    hostDirectives: [NgpExitAnimation],
                     host: {
                         role: 'listbox',
                         '[id]': 'id()',
+                        '[style.left.px]': 'state().overlay()?.position()?.x',
+                        '[style.top.px]': 'state().overlay()?.position()?.y',
+                        '[style.--ngp-combobox-transform-origin]': 'state().overlay()?.transformOrigin()',
+                        '[style.--ngp-combobox-width.px]': 'comboboxDimensions().width',
+                        '[style.--ngp-combobox-input-width.px]': 'inputDimensions().width',
+                        '[style.--ngp-combobox-button-width.px]': 'buttonDimensions().width',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -329,99 +341,54 @@ class NgpComboboxPortal {
         this.state = injectComboboxState();
         /** Access the template reference. */
         this.templateRef = inject(TemplateRef);
-        /** Access the view container reference. */
-        this.viewContainerRef = inject(ViewContainerRef);
         /** Access the injector. */
         this.injector = inject(Injector);
-        /** Access the document. */
-        this.document = inject(DOCUMENT);
         /**
-         * Store the embedded view reference.
+         * The overlay that manages the popover
          * @internal
          */
-        this.viewRef = signal(null);
-        /** Store the dispose function. */
-        this.dispose = null;
-        /** The position of the dropdown. */
-        this.position = signal({ x: 0, y: 0 });
-        /** The dimensions of the combobox. */
-        this.comboboxDimensions = observeResize(() => this.state().elementRef.nativeElement);
-        /** The dimensions of the combobox. */
-        this.inputDimensions = observeResize(() => this.state().input()?.elementRef.nativeElement);
-        /** Store the combobox button dimensions. */
-        this.buttonDimensions = observeResize(() => this.state().button()?.elementRef.nativeElement);
+        this.overlay = signal(null);
         this.state().registerPortal(this);
-        effect(() => {
-            const dropdownElement = this.viewRef()?.getElements()[0];
-            if (!dropdownElement) {
-                return;
-            }
-            const position = this.position();
-            const comboboxWidth = this.comboboxDimensions().width;
-            const inputWidth = this.inputDimensions().width;
-            const buttonWidth = this.buttonDimensions().width;
-            if (!dropdownElement) {
-                return;
-            }
-            const styles = {
-                position: 'absolute',
-                left: `${position.x}px`,
-                top: `${position.y}px`,
-                '--ngp-combobox-width': `${comboboxWidth}px`,
-                '--ngp-combobox-input-width': `${inputWidth}px`,
-                '--ngp-combobox-button-width': `${buttonWidth}px`,
-            };
-            for (const [key, value] of Object.entries(styles)) {
-                dropdownElement.style.setProperty(key, value);
-            }
-        });
     }
     /** Cleanup the portal. */
     ngOnDestroy() {
-        this.detach();
-        this.dispose?.();
+        this.overlay()?.destroy();
     }
     /**
      * Attach the portal.
      * @internal
      */
-    attach() {
-        const viewRef = createPortal(this.templateRef, this.viewContainerRef, this.injector);
-        viewRef.attach(this.document.body);
-        viewRef.detectChanges();
-        this.viewRef.set(viewRef);
-        const dropdownElement = this.viewRef()?.getElements()[0];
-        if (!dropdownElement) {
-            throw new Error('Dropdown element not found');
+    show() {
+        // Create the overlay if it doesn't exist yet
+        if (!this.overlay()) {
+            this.createOverlay();
         }
-        let placement;
-        const middleware = [];
-        switch (this.state().dropdownPosition()) {
-            case 'top':
-                placement = 'top-start';
-                break;
-            case 'bottom':
-                placement = 'bottom-start';
-                break;
-            case 'auto':
-                placement = 'bottom-start';
-                middleware.push(flip({ fallbackPlacements: ['top-start'] }));
-                break;
-        }
-        this.dispose = autoUpdate(this.state().elementRef.nativeElement, dropdownElement, async () => {
-            const position = await computePosition(this.state().elementRef.nativeElement, dropdownElement, { placement, middleware, strategy: 'absolute' });
-            this.position.set({ x: position.x, y: position.y });
-        });
+        // Show the overlay
+        return this.overlay().show();
     }
     /**
      * Detach the portal.
      * @internal
      */
     async detach() {
-        await this.viewRef()?.detach();
-        this.viewRef.set(null);
-        this.dispose?.();
-        this.dispose = null;
+        this.overlay()?.hide();
+    }
+    /**
+     * Create the overlay that will contain the dropdown
+     */
+    createOverlay() {
+        // Create config for the overlay
+        const config = {
+            content: this.templateRef,
+            triggerElement: this.state().elementRef.nativeElement,
+            injector: this.injector,
+            placement: this.state().placement(),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            restoreFocus: false,
+            scrollBehaviour: 'reposition',
+        };
+        this.overlay.set(createOverlay(config));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpComboboxPortal, isStandalone: true, selector: "[ngpComboboxPortal]", exportAs: ["ngpComboboxPortal"], ngImport: i0 }); }
@@ -467,8 +434,8 @@ class NgpCombobox {
             alias: 'ngpComboboxCompareWith',
         });
         /** The position of the dropdown. */
-        this.dropdownPosition = input('bottom', {
-            alias: 'ngpComboboxDropdownPosition',
+        this.placement = input('bottom', {
+            alias: 'ngpComboboxDropdownPlacement',
         });
         /**
          * Store the combobox input
@@ -495,11 +462,16 @@ class NgpCombobox {
          * @internal
          */
         this.options = signal([]);
+        /**
+         * Access the overlay
+         * @internal
+         */
+        this.overlay = computed(() => this.portal()?.overlay());
         /**
          * The open state of the combobox.
          * @internal
          */
-        this.open = computed(() => this.portal()?.viewRef() !== null);
+        this.open = computed(() => this.overlay()?.isOpen() ?? false);
         /**
          * The active key descendant manager.
          * @internal
@@ -521,11 +493,11 @@ class NgpCombobox {
      * Open the dropdown.
      * @internal
      */
-    openDropdown() {
+    async openDropdown() {
         if (this.state.disabled() || this.open()) {
             return;
         }
-        this.portal()?.attach();
+        await this.portal()?.show();
         // if there is a selected option(s), set the active descendant to the first selected option
         const selectedOption = this.options().find(option => this.isOptionSelected(option));
         // if there is no selected option, set the active descendant to the first option
@@ -568,10 +540,14 @@ class NgpCombobox {
      * @internal
      */
     selectOption(option) {
-        if (this.state.disabled() || this.isOptionSelected(option)) {
+        if (this.state.disabled()) {
             return;
         }
         if (this.state.multiple()) {
+            // if the option is already selected, do nothing
+            if (this.isOptionSelected(option)) {
+                return;
+            }
             const value = [...this.state.value(), option.value()];
             // add the option to the value
             this.state.value.set(value);
@@ -733,14 +709,14 @@ class NgpCombobox {
         this.options.update(options => options.filter(o => o !== option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "ngpComboboxDropdownPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { properties: { "attr.data-open": "state.open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideComboboxState()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpComboboxDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { properties: { "attr.data-open": "state.open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideComboboxState(), provideExitAnimationManager()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpCombobox]',
                     exportAs: 'ngpCombobox',
-                    providers: [provideComboboxState()],
+                    providers: [provideComboboxState(), provideExitAnimationManager()],
                     host: {
                         '[attr.data-open]': 'state.open() ? "" : undefined',
                         '[attr.data-disabled]': 'state.disabled() ? "" : undefined',