chore(select): Use base-fit positioning #5911

Update Dev sample. Comment overflow-y.

Author: IvayloG

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -211,7 +211,7 @@
     }
 
     %igx-drop-down__list {
-        overflow-y: auto;
+        // overflow-y: auto;
         z-index: 1;
         box-shadow: --var($theme, 'shadow');
         background: --var($theme, 'background-color');

projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts

@@ -17,5 +17,5 @@ export interface IgxSelectBase extends IgxDropDownBase {
     getFooterContainer(): HTMLElement;
     getHeaderTemplate(): TemplateRef<any> ;
     getFooterTemplate(): TemplateRef<any> ;
-    getEditElement(): HTMLElement;
+    getEditElement(): HTMLElement; // returns input HTMLElement
 }

projects/igniteui-angular/src/lib/select/select.common.ts

@@ -34,7 +34,8 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.targetRect,
             connectedFit.contentElementRect,
             this.settings.horizontalStartPoint,
-            this.settings.horizontalDirection);
+            this.settings.horizontalDirection,
+            connectedFit.xOffset);
         connectedFit.right = connectedFit.left + connectedFit.contentElementRect.width;
         connectedFit.fitHorizontal =
             connectedFit.viewPortRect.left < connectedFit.left && connectedFit.right < connectedFit.viewPortRect.right;
@@ -43,7 +44,8 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.targetRect,
             connectedFit.contentElementRect,
             this.settings.verticalStartPoint,
-            this.settings.verticalDirection);
+            this.settings.verticalDirection,
+            connectedFit.yOffset);
         connectedFit.bottom = connectedFit.top + connectedFit.contentElementRect.height;
         connectedFit.fitVertical =
             connectedFit.viewPortRect.top < connectedFit.top && connectedFit.bottom < connectedFit.viewPortRect.bottom;
@@ -58,8 +60,9 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
      * @param direction Direction in which to show the element
      */
     protected calculateLeft(
-        targetRect: ClientRect, elementRect: ClientRect, startPoint: HorizontalAlignment, direction: HorizontalAlignment): number {
-        return targetRect.right + targetRect.width * startPoint + elementRect.width * direction;
+        targetRect: ClientRect, elementRect: ClientRect, startPoint: HorizontalAlignment, direction: HorizontalAlignment, offset?: number):
+        number {
+        return targetRect.right + targetRect.width * startPoint + elementRect.width * direction + offset;
     }
 
     /**
@@ -71,8 +74,9 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
      * @param direction Direction in which to show the element
      */
     protected calculateTop(
-        targetRect: ClientRect, elementRect: ClientRect, startPoint: VerticalAlignment, direction: VerticalAlignment): number {
-        return targetRect.bottom + targetRect.height * startPoint + elementRect.height * direction;
+        targetRect: ClientRect, elementRect: ClientRect, startPoint: VerticalAlignment, direction: VerticalAlignment, offset?: number):
+        number {
+        return targetRect.bottom + targetRect.height * startPoint + elementRect.height * direction + offset;
     }
 
     /**
@@ -95,4 +99,7 @@ export interface ConnectedFit {
     right?: number;
     top?: number;
     bottom?: number;
+    xOffset?: number;
+    yOffset?: number;
 }
+

projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts

@@ -2,6 +2,33 @@
     Several select components with a variety of setups and API interaction.
 </app-page-header>
 
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+
 <div class="sampleWrapper">
     <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
     <igx-select #displayDensitySelect
@@ -23,6 +50,17 @@ <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
         <igx-select-item *ngFor="let item of items; let inx=index" [value]="item.field">
             {{ item.field }}
         </igx-select-item>
+        <ng-template igxSelectHeader>
+            <div class="custom-select-header">
+                I AM a HEADER
+            </div>
+        </ng-template>
+        <ng-template igxSelectFooter>
+                <div class="custom-select-footer">
+                        <igx-icon fontSet="material">add</igx-icon>
+                        <button igxButton="raised" (click)="addItem()">addItem</button>
+                </div>
+            </ng-template>
     </igx-select>
 
     <div>

src/app/select/select.sample.html

@@ -97,3 +97,11 @@
 .warn {
     color: darkorange;
 }
+
+.custom-select-header,
+.custom-select-footer {
+    padding: 4px 8px;
+    background: #777;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
+}

src/app/select/select.sample.scss

@@ -36,7 +36,7 @@ export class SelectSampleComponent implements OnInit {
     public items: any[] = [];
     public value: 'opt1';
     public disabledItemValue: 'InsideGroup1';
-    public fruits: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
+    public fruits: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Pear', 'Lemon', 'Peach', 'Apricot', 'Grapes', 'Cactus'];
     public selected: string;
     public selectRequired = true;
 
@@ -147,4 +147,8 @@ export class SelectSampleComponent implements OnInit {
     setDensity(density: DisplayDensity) {
         this.selectDisplayDensity.displayDensity = density;
     }
+
+    addItem() {
+        // TODO
+    }
 }