feat(select): switch default to AutoPositionStrategy; export IgxSelectOverlapPositionStrategy as opt-in

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 
+- `IgxSelectComponent`
+    - The default positioning strategy has changed from the internal overlap strategy to `AutoPositionStrategy`. The dropdown now opens below (or above, if there is not enough space) the input element, consistent with other connected components.
+    - Added `IgxSelectOverlapPositionStrategy` - a new publicly exported strategy that preserves the previous behavior of aligning the selected item's text over the input text. Consumers can opt into this behavior by passing `overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(select) }`.
+
 - **Theming**
     - Added derived themes for the Grid and related internal components. When a parent component theme is included, its internal controls now derive their tokens from the parent theme colors, keeping nested buttons, icons, inputs, dropdowns, checkboxes, scrollbars, chips, and other helper components visually aligned.
 

projects/igniteui-angular/select/src/select/public_api.ts

@@ -6,6 +6,7 @@ import { IgxSelectComponent, IgxSelectFooterDirective, IgxSelectHeaderDirective,
 export * from './select-group.component';
 export * from './select-item.component';
 export * from './select.component';
+export * from './select-overlap-positioning-strategy';
 
 /* NOTE: Select directives collection for ease-of-use import in standalone components scenario */
 export const IGX_SELECT_DIRECTIVES = [

projects/igniteui-angular/select/src/select/select-positioning-strategy.ts → projects/igniteui-angular/select/src/select/select-overlap-positioning-strategy.ts

@@ -1,13 +1,13 @@
 import { VerticalAlignment, HorizontalAlignment, PositionSettings, ConnectedFit, Point, Size, BaseFitPositionStrategy, Util  } from 'igniteui-angular/core';
 import { IPositionStrategy } from 'igniteui-angular/core';
 
-import { IgxSelectBase } from './select.common';
+import type { IgxSelectComponent } from './select.component';
 import { PlatformUtil } from 'igniteui-angular/core';
 import { Optional } from '@angular/core';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
 
 /** @hidden @internal */
-export class SelectPositioningStrategy extends BaseFitPositionStrategy implements IPositionStrategy {
+export class IgxSelectOverlapPositionStrategy extends BaseFitPositionStrategy implements IPositionStrategy {
     private _selectDefaultSettings = {
         horizontalDirection: HorizontalAlignment.Right,
         verticalDirection: VerticalAlignment.Bottom,
@@ -22,7 +22,10 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
     private global_xOffset = 0;
     private global_styles: SelectStyles = {};
 
-    constructor(public select: IgxSelectBase, settings?: PositionSettings, @Optional() protected platform?: PlatformUtil) {
+    /** @hidden @internal */
+    public ownsScrollPositioning = true;
+
+    constructor(public select: IgxSelectComponent, settings?: PositionSettings, @Optional() protected platform?: PlatformUtil) {
         super();
         this.settings = Object.assign({}, this._selectDefaultSettings, settings);
     }