@sebgroup/green-angular 6.2.1 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sebgroup/green-angular",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "peerDependencies": {
     "@angular/cdk": ">=18",
     "@angular/common": ">=18",
@@ -17,7 +17,7 @@
     "scroll-into-view-if-needed": "^2.2.31"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^2.4.0",
+    "@sebgroup/green-core": "^2.5.2",
     "@sebgroup/chlorophyll": "^3.6.20",
     "@sebgroup/extract": "^3.0.2",
     "tslib": "^2.3.1"
@@ -111,12 +111,6 @@
       "esm": "./esm2022/src/lib/modal/sebgroup-green-angular-src-lib-modal.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-lib-modal.mjs"
     },
-    "./src/lib/pagination": {
-      "types": "./src/lib/pagination/index.d.ts",
-      "esm2022": "./esm2022/src/lib/pagination/sebgroup-green-angular-src-lib-pagination.mjs",
-      "esm": "./esm2022/src/lib/pagination/sebgroup-green-angular-src-lib-pagination.mjs",
-      "default": "./fesm2022/sebgroup-green-angular-src-lib-pagination.mjs"
-    },
     "./src/lib/progress-circle": {
       "types": "./src/lib/progress-circle/index.d.ts",
       "esm2022": "./esm2022/src/lib/progress-circle/sebgroup-green-angular-src-lib-progress-circle.mjs",
@@ -135,6 +129,12 @@
       "esm": "./esm2022/src/lib/shared/sebgroup-green-angular-src-lib-shared.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-lib-shared.mjs"
     },
+    "./src/lib/pagination": {
+      "types": "./src/lib/pagination/index.d.ts",
+      "esm2022": "./esm2022/src/lib/pagination/sebgroup-green-angular-src-lib-pagination.mjs",
+      "esm": "./esm2022/src/lib/pagination/sebgroup-green-angular-src-lib-pagination.mjs",
+      "default": "./fesm2022/sebgroup-green-angular-src-lib-pagination.mjs"
+    },
     "./src/lib/slider": {
       "types": "./src/lib/slider/index.d.ts",
       "esm2022": "./esm2022/src/lib/slider/sebgroup-green-angular-src-lib-slider.mjs",
@@ -177,12 +177,6 @@
       "esm": "./esm2022/src/v-angular/button/sebgroup-green-angular-src-v-angular-button.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-v-angular-button.mjs"
     },
-    "./src/v-angular/card": {
-      "types": "./src/v-angular/card/index.d.ts",
-      "esm2022": "./esm2022/src/v-angular/card/sebgroup-green-angular-src-v-angular-card.mjs",
-      "esm": "./esm2022/src/v-angular/card/sebgroup-green-angular-src-v-angular-card.mjs",
-      "default": "./fesm2022/sebgroup-green-angular-src-v-angular-card.mjs"
-    },
     "./src/v-angular/character-countdown": {
       "types": "./src/v-angular/character-countdown/index.d.ts",
       "esm2022": "./esm2022/src/v-angular/character-countdown/sebgroup-green-angular-src-v-angular-character-countdown.mjs",
@@ -195,6 +189,12 @@
       "esm": "./esm2022/src/v-angular/checkbox/sebgroup-green-angular-src-v-angular-checkbox.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs"
     },
+    "./src/v-angular/card": {
+      "types": "./src/v-angular/card/index.d.ts",
+      "esm2022": "./esm2022/src/v-angular/card/sebgroup-green-angular-src-v-angular-card.mjs",
+      "esm": "./esm2022/src/v-angular/card/sebgroup-green-angular-src-v-angular-card.mjs",
+      "default": "./fesm2022/sebgroup-green-angular-src-v-angular-card.mjs"
+    },
     "./src/v-angular/core": {
       "types": "./src/v-angular/core/index.d.ts",
       "esm2022": "./esm2022/src/v-angular/core/sebgroup-green-angular-src-v-angular-core.mjs",
@@ -207,18 +207,18 @@
       "esm": "./esm2022/src/v-angular/datepicker/sebgroup-green-angular-src-v-angular-datepicker.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs"
     },
-    "./src/v-angular/dropdown": {
-      "types": "./src/v-angular/dropdown/index.d.ts",
-      "esm2022": "./esm2022/src/v-angular/dropdown/sebgroup-green-angular-src-v-angular-dropdown.mjs",
-      "esm": "./esm2022/src/v-angular/dropdown/sebgroup-green-angular-src-v-angular-dropdown.mjs",
-      "default": "./fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs"
-    },
     "./src/v-angular/drag-drop": {
       "types": "./src/v-angular/drag-drop/index.d.ts",
       "esm2022": "./esm2022/src/v-angular/drag-drop/sebgroup-green-angular-src-v-angular-drag-drop.mjs",
       "esm": "./esm2022/src/v-angular/drag-drop/sebgroup-green-angular-src-v-angular-drag-drop.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-v-angular-drag-drop.mjs"
     },
+    "./src/v-angular/dropdown": {
+      "types": "./src/v-angular/dropdown/index.d.ts",
+      "esm2022": "./esm2022/src/v-angular/dropdown/sebgroup-green-angular-src-v-angular-dropdown.mjs",
+      "esm": "./esm2022/src/v-angular/dropdown/sebgroup-green-angular-src-v-angular-dropdown.mjs",
+      "default": "./fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs"
+    },
     "./src/v-angular/external-link": {
       "types": "./src/v-angular/external-link/index.d.ts",
       "esm2022": "./esm2022/src/v-angular/external-link/sebgroup-green-angular-src-v-angular-external-link.mjs",

package/src/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts

@@ -20,6 +20,10 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
     id: any;
     /** Special property used for selecting DOM elements during automated UI testing. */
     thook: string | null | undefined;
+    /**
+     * @deprecated This attribute is no longer used. The dropdown position is now handled by Angular CDK Overlay.
+     * Will be removed in a future release.
+     */
     get positionAttr(): "bottom" | "top";
     options: any[];
     textToHighlight?: string;
@@ -36,15 +40,31 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
      */
     selectWithSpace: boolean;
     /**
-     * When true, the dropdown will automatically choose to open above or below the input
-     * based on available space in the viewport, and will scale its height to fit if needed.
+     * @deprecated This input is no longer used. The dropdown now always chooses position dynamically.
+     * Will be removed in a future release.
      */
     dynamicPosition: boolean;
+    /**
+     * Stores the bounding rectangle of the dropdown trigger element,
+     * used for positioning the dropdown list overlay.
+     */
+    triggerRect?: DOMRect;
+    /**
+     * Controls whether the dropdown list should have a vertical margin.
+     * Set to false when the dropdown list is rendered in a CDK overlay and spacing is handled by overlay offset.
+     * Set to true when the dropdown list is used standalone or in other micro frontends, so it maintains visual spacing.
+     * Defaults to true.
+     */
+    useMargin: boolean;
     selectedValueChanged: EventEmitter<any>;
     closed: EventEmitter<void>;
     /** The current active option based on numeric index. */
     activeIndex: number;
     scope: string | undefined;
+    /**
+     * @deprecated This attribute is no longer used. The dropdown position is now handled by Angular CDK Overlay.
+     * Will be removed in a future release.
+     */
     dropdownPosition: 'bottom' | 'top';
     private dropdownUtils;
     private _expanded;
@@ -117,10 +137,9 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
     scrollToResult(option: any, focusElement?: boolean): void;
     /**
      * Calculates available space above and below the dropdown input,
-     * sets dropdownPosition ('top' or 'bottom') accordingly,
      * and dynamically sets the max-height of the dropdown list to fit the viewport.
      */
-    setDropdownPosition(): void;
+    setDropdownHeight(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownListComponent, [{ optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownListComponent, "nggv-dropdown-list", never, { "expanded": { "alias": "expanded"; "required": false; }; "state": { "alias": "state"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "optionContentTpl": { "alias": "optionContentTpl"; "required": false; }; "groupLabelTpl": { "alias": "groupLabelTpl"; "required": false; }; "id": { "alias": "id"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "options": { "alias": "options"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "onlyEmitDistinctChanges": { "alias": "onlyEmitDistinctChanges"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "dynamicPosition": { "alias": "dynamicPosition"; "required": false; }; }, { "selectedValueChanged": "selectedValueChanged"; "closed": "closed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownListComponent, "nggv-dropdown-list", never, { "expanded": { "alias": "expanded"; "required": false; }; "state": { "alias": "state"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "optionContentTpl": { "alias": "optionContentTpl"; "required": false; }; "groupLabelTpl": { "alias": "groupLabelTpl"; "required": false; }; "id": { "alias": "id"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "options": { "alias": "options"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "onlyEmitDistinctChanges": { "alias": "onlyEmitDistinctChanges"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "dynamicPosition": { "alias": "dynamicPosition"; "required": false; }; "triggerRect": { "alias": "triggerRect"; "required": false; }; "useMargin": { "alias": "useMargin"; "required": false; }; }, { "selectedValueChanged": "selectedValueChanged"; "closed": "closed"; }, never, never, false, never>;
 }

package/src/v-angular/dropdown/dropdown.component.d.ts

@@ -1,5 +1,6 @@
 import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
-import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
+import { ConnectedPosition, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { TranslocoScope } from '@jsverse/transloco';
 import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
@@ -15,6 +16,8 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
     protected translocoScope: TranslocoScope;
     protected cdr: ChangeDetectorRef;
     protected dropdownUtils: DropdownUtils<K, V, T>;
+    protected overlay: Overlay;
+    protected vcr: ViewContainerRef;
     /** Custom template for displaying options and groups. */
     selectedContentTpl: TemplateRef<OptionBase<T>> | undefined;
     optionContentTpl: TemplateRef<OptionBase<any>> | undefined;
@@ -25,6 +28,9 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
     thook: string | null | undefined;
     get isSmall(): boolean;
     get isLarge(): boolean;
+    /** Reference to the dropdown list template used for rendering the dropdown in an overlay. */
+    dropdownTemplate: TemplateRef<any>;
+    toggleButton: ElementRef;
     /**
      * Sets the displayed size of the dropdown.
      */
@@ -65,6 +71,11 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * Defaults to true.
      */
     onlyHandleDistinctChanges: boolean;
+    /**
+     * If true (default), the dropdown list will close when any scrollable ancestor is scrolled.
+     * If false, the dropdown list will reposition itself instead of closing.
+     */
+    closeDropdownListOnScroll: boolean;
     /**
      * Emits changes of the expanded state of the dropdown
      */
@@ -75,13 +86,24 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
     expanded: boolean;
     /** The current option selected based on numeric index. */
     activeIndex: number;
+    /**
+     * Stores the bounding rectangle of the dropdown trigger element,
+     * used for positioning the dropdown list overlay.
+     */
+    triggerRect: DOMRect | undefined;
     /** Subscribe if dropdown expanded to listen to click outside to close dropdown. */
     private onClickSubscription;
     /** Subscribe if dropdown expanded to listen to scroll outside to close dropdown. */
     private onScrollSubscription;
+    /** Subscribe to get dropdown width size changes for a dropdown list width to match. */
+    private resizeSubscription;
+    /** Subscription to dropdown list overlay detachments. */
+    private overlayDetachSubscription;
     keyEvent: KeyboardEvent;
     private _options;
-    constructor(ngControl: NgControl, translocoScope: TranslocoScope, cdr: ChangeDetectorRef, dropdownUtils: DropdownUtils<K, V, T>);
+    /** Reference to the currently attached dropdown list overlay. Used for opening/closing and positioning. */
+    private overlayRef?;
+    constructor(ngControl: NgControl, translocoScope: TranslocoScope, cdr: ChangeDetectorRef, dropdownUtils: DropdownUtils<K, V, T>, overlay: Overlay, vcr: ViewContainerRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /** @internal override to correctly set state from form value */
@@ -93,7 +115,6 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * Closes the dropdown on click outside.
      */
     subscribeToOutsideClickEvent(): void;
-    subscribeToOutsideScrollEvent(): void;
     /**
      * Set the dropdown value to given option.
      * @param value the dropdown option to select.
@@ -107,6 +128,20 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * @param state the expanded state which to set.
      */
     setExpanded(state?: boolean): void;
+    /**
+     * Opens the dropdown overlay by detaching any existing overlay reference,
+     * attaching a new overlay, updating its width, and setting up listeners for overlay detachments.
+     * This method ensures the dropdown overlay is properly initialized and displayed.
+     */
+    openDropdownOverlay(): void;
+    detachOldOverlayRef(): void;
+    attachNewOverlayRef(): void;
+    updateOverlayWidth(): void;
+    listenOverlayDetachments(): void;
+    getDropdownListPositionsArray(): ConnectedPosition[];
+    getScrollStrategy(): ScrollStrategy;
+    setOverlayWidth(): void;
+    closeDropdownOverlay(): void;
     /**
      * Typecast anything to an {@link Option}.
      * @param option the object to typecast.
@@ -122,6 +157,6 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * @param option the object to check.
      */
     isOption(option: OptionBase<T>): option is OptionGroup<T>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownComponent<any, any, any>, [{ optional: true; self: true; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownComponent<any, any, any>, "nggv-dropdown", never, { "thook": { "alias": "thook"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "allowControlNullishOption": { "alias": "allowControlNullishOption"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "selectOnSingleOption": { "alias": "selectOnSingleOption"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "onlyHandleDistinctChanges": { "alias": "onlyHandleDistinctChanges"; "required": false; }; }, { "expandedChange": "expandedChange"; }, ["selectedContentTpl", "optionContentTpl", "groupLabelTpl"], ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownComponent<any, any, any>, [{ optional: true; self: true; }, { optional: true; }, null, null, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownComponent<any, any, any>, "nggv-dropdown", never, { "thook": { "alias": "thook"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "allowControlNullishOption": { "alias": "allowControlNullishOption"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "selectOnSingleOption": { "alias": "selectOnSingleOption"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "onlyHandleDistinctChanges": { "alias": "onlyHandleDistinctChanges"; "required": false; }; "closeDropdownListOnScroll": { "alias": "closeDropdownListOnScroll"; "required": false; }; }, { "expandedChange": "expandedChange"; }, ["selectedContentTpl", "optionContentTpl", "groupLabelTpl"], ["*"], false, never>;
 }

package/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts

@@ -20,6 +20,10 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
     id: any;
     /** Special property used for selecting DOM elements during automated UI testing. */
     thook: string | null | undefined;
+    /**
+     * @deprecated This attribute is no longer used. The dropdown position is now handled by Angular CDK Overlay.
+     * Will be removed in a future release.
+     */
     get positionAttr(): "bottom" | "top";
     options: any[];
     textToHighlight?: string;
@@ -36,15 +40,31 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
      */
     selectWithSpace: boolean;
     /**
-     * When true, the dropdown will automatically choose to open above or below the input
-     * based on available space in the viewport, and will scale its height to fit if needed.
+     * @deprecated This input is no longer used. The dropdown now always chooses position dynamically.
+     * Will be removed in a future release.
      */
     dynamicPosition: boolean;
+    /**
+     * Stores the bounding rectangle of the dropdown trigger element,
+     * used for positioning the dropdown list overlay.
+     */
+    triggerRect?: DOMRect;
+    /**
+     * Controls whether the dropdown list should have a vertical margin.
+     * Set to false when the dropdown list is rendered in a CDK overlay and spacing is handled by overlay offset.
+     * Set to true when the dropdown list is used standalone or in other micro frontends, so it maintains visual spacing.
+     * Defaults to true.
+     */
+    useMargin: boolean;
     selectedValueChanged: EventEmitter<any>;
     closed: EventEmitter<void>;
     /** The current active option based on numeric index. */
     activeIndex: number;
     scope: string | undefined;
+    /**
+     * @deprecated This attribute is no longer used. The dropdown position is now handled by Angular CDK Overlay.
+     * Will be removed in a future release.
+     */
     dropdownPosition: 'bottom' | 'top';
     private dropdownUtils;
     private _expanded;
@@ -117,10 +137,9 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
     scrollToResult(option: any, focusElement?: boolean): void;
     /**
      * Calculates available space above and below the dropdown input,
-     * sets dropdownPosition ('top' or 'bottom') accordingly,
      * and dynamically sets the max-height of the dropdown list to fit the viewport.
      */
-    setDropdownPosition(): void;
+    setDropdownHeight(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownListComponent, [{ optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownListComponent, "nggv-dropdown-list", never, { "expanded": { "alias": "expanded"; "required": false; }; "state": { "alias": "state"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "optionContentTpl": { "alias": "optionContentTpl"; "required": false; }; "groupLabelTpl": { "alias": "groupLabelTpl"; "required": false; }; "id": { "alias": "id"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "options": { "alias": "options"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "onlyEmitDistinctChanges": { "alias": "onlyEmitDistinctChanges"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "dynamicPosition": { "alias": "dynamicPosition"; "required": false; }; }, { "selectedValueChanged": "selectedValueChanged"; "closed": "closed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownListComponent, "nggv-dropdown-list", never, { "expanded": { "alias": "expanded"; "required": false; }; "state": { "alias": "state"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "optionContentTpl": { "alias": "optionContentTpl"; "required": false; }; "groupLabelTpl": { "alias": "groupLabelTpl"; "required": false; }; "id": { "alias": "id"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "options": { "alias": "options"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "onlyEmitDistinctChanges": { "alias": "onlyEmitDistinctChanges"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "dynamicPosition": { "alias": "dynamicPosition"; "required": false; }; "triggerRect": { "alias": "triggerRect"; "required": false; }; "useMargin": { "alias": "useMargin"; "required": false; }; }, { "selectedValueChanged": "selectedValueChanged"; "closed": "closed"; }, never, never, false, never>;
 }

package/v-angular/dropdown/dropdown.component.d.ts

@@ -1,5 +1,6 @@
 import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
-import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
+import { ConnectedPosition, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { TranslocoScope } from '@jsverse/transloco';
 import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
@@ -15,6 +16,8 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
     protected translocoScope: TranslocoScope;
     protected cdr: ChangeDetectorRef;
     protected dropdownUtils: DropdownUtils<K, V, T>;
+    protected overlay: Overlay;
+    protected vcr: ViewContainerRef;
     /** Custom template for displaying options and groups. */
     selectedContentTpl: TemplateRef<OptionBase<T>> | undefined;
     optionContentTpl: TemplateRef<OptionBase<any>> | undefined;
@@ -25,6 +28,9 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
     thook: string | null | undefined;
     get isSmall(): boolean;
     get isLarge(): boolean;
+    /** Reference to the dropdown list template used for rendering the dropdown in an overlay. */
+    dropdownTemplate: TemplateRef<any>;
+    toggleButton: ElementRef;
     /**
      * Sets the displayed size of the dropdown.
      */
@@ -65,6 +71,11 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * Defaults to true.
      */
     onlyHandleDistinctChanges: boolean;
+    /**
+     * If true (default), the dropdown list will close when any scrollable ancestor is scrolled.
+     * If false, the dropdown list will reposition itself instead of closing.
+     */
+    closeDropdownListOnScroll: boolean;
     /**
      * Emits changes of the expanded state of the dropdown
      */
@@ -75,13 +86,24 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
     expanded: boolean;
     /** The current option selected based on numeric index. */
     activeIndex: number;
+    /**
+     * Stores the bounding rectangle of the dropdown trigger element,
+     * used for positioning the dropdown list overlay.
+     */
+    triggerRect: DOMRect | undefined;
     /** Subscribe if dropdown expanded to listen to click outside to close dropdown. */
     private onClickSubscription;
     /** Subscribe if dropdown expanded to listen to scroll outside to close dropdown. */
     private onScrollSubscription;
+    /** Subscribe to get dropdown width size changes for a dropdown list width to match. */
+    private resizeSubscription;
+    /** Subscription to dropdown list overlay detachments. */
+    private overlayDetachSubscription;
     keyEvent: KeyboardEvent;
     private _options;
-    constructor(ngControl: NgControl, translocoScope: TranslocoScope, cdr: ChangeDetectorRef, dropdownUtils: DropdownUtils<K, V, T>);
+    /** Reference to the currently attached dropdown list overlay. Used for opening/closing and positioning. */
+    private overlayRef?;
+    constructor(ngControl: NgControl, translocoScope: TranslocoScope, cdr: ChangeDetectorRef, dropdownUtils: DropdownUtils<K, V, T>, overlay: Overlay, vcr: ViewContainerRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /** @internal override to correctly set state from form value */
@@ -93,7 +115,6 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * Closes the dropdown on click outside.
      */
     subscribeToOutsideClickEvent(): void;
-    subscribeToOutsideScrollEvent(): void;
     /**
      * Set the dropdown value to given option.
      * @param value the dropdown option to select.
@@ -107,6 +128,20 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * @param state the expanded state which to set.
      */
     setExpanded(state?: boolean): void;
+    /**
+     * Opens the dropdown overlay by detaching any existing overlay reference,
+     * attaching a new overlay, updating its width, and setting up listeners for overlay detachments.
+     * This method ensures the dropdown overlay is properly initialized and displayed.
+     */
+    openDropdownOverlay(): void;
+    detachOldOverlayRef(): void;
+    attachNewOverlayRef(): void;
+    updateOverlayWidth(): void;
+    listenOverlayDetachments(): void;
+    getDropdownListPositionsArray(): ConnectedPosition[];
+    getScrollStrategy(): ScrollStrategy;
+    setOverlayWidth(): void;
+    closeDropdownOverlay(): void;
     /**
      * Typecast anything to an {@link Option}.
      * @param option the object to typecast.
@@ -122,6 +157,6 @@ export declare class NggvDropdownComponent<K = string | null | undefined, V = st
      * @param option the object to check.
      */
     isOption(option: OptionBase<T>): option is OptionGroup<T>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownComponent<any, any, any>, [{ optional: true; self: true; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownComponent<any, any, any>, "nggv-dropdown", never, { "thook": { "alias": "thook"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "allowControlNullishOption": { "alias": "allowControlNullishOption"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "selectOnSingleOption": { "alias": "selectOnSingleOption"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "onlyHandleDistinctChanges": { "alias": "onlyHandleDistinctChanges"; "required": false; }; }, { "expandedChange": "expandedChange"; }, ["selectedContentTpl", "optionContentTpl", "groupLabelTpl"], ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownComponent<any, any, any>, [{ optional: true; self: true; }, { optional: true; }, null, null, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownComponent<any, any, any>, "nggv-dropdown", never, { "thook": { "alias": "thook"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "allowControlNullishOption": { "alias": "allowControlNullishOption"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "selectOnSingleOption": { "alias": "selectOnSingleOption"; "required": false; }; "selectWithSpace": { "alias": "selectWithSpace"; "required": false; }; "onlyHandleDistinctChanges": { "alias": "onlyHandleDistinctChanges"; "required": false; }; "closeDropdownListOnScroll": { "alias": "closeDropdownListOnScroll"; "required": false; }; }, { "expandedChange": "expandedChange"; }, ["selectedContentTpl", "optionContentTpl", "groupLabelTpl"], ["*"], false, never>;
 }