fix(popover): add missing start and end positions to positions mapping (

#1904)

src/framework/theme/components/cdk/overlay/overlay-position.spec.ts

@@ -0,0 +1,95 @@
+import { TestBed } from '@angular/core/testing';
+import { Component, NgModule } from '@angular/core';
+import {
+ NbThemeModule,
+ NbOverlayModule,
+ NbPositionBuilderService,
+ NbOverlayService,
+ NbComponentPortal,
+ NbLayoutModule, NbLayoutComponent,
+} from '@nebular/theme';
+import {
+ NbAdjustableConnectedPositionStrategy,
+ NbPosition,
+ NbAdjustment,
+} from '@nebular/theme/components/cdk/overlay/overlay-position';
+import { RouterTestingModule } from '@angular/router/testing';
+
+@Component({
+ template: `portal-component`,
+})
+export class PortalComponent {}
+
+@NgModule({
+ declarations: [ PortalComponent ],
+ exports: [ PortalComponent ],
+ entryComponents: [ PortalComponent ],
+})
+export class PortalModule {}
+
+describe('NbAdjustableConnectedPositionStrategy', () => {
+ let strategy: NbAdjustableConnectedPositionStrategy;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ NbThemeModule.forRoot(),
+ NbOverlayModule.forRoot(),
+ NbLayoutModule,
+ PortalModule,
+ RouterTestingModule.withRoutes([]),
+ ],
+ });
+
+ // Have to create layout component as it's required for scroll service to work properly.
+ // Also it registers overlay container so we don't have to create it manually.
+ TestBed.createComponent(NbLayoutComponent);
+
+ const hostElement = document.createElement('div');
+ hostElement.style.width = '10px';
+ hostElement.style.height = '10px';
+ hostElement.style.backgroundColor = 'red';
+ document.body.appendChild(hostElement);
+
+ const positionBuilderService: NbPositionBuilderService = TestBed.get(NbPositionBuilderService);
+ strategy = positionBuilderService.connectedTo({ nativeElement: hostElement });
+ });
+
+ it('should create strategy with position start and adjustment noop', () => {
+ const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();
+
+ strategy.position(NbPosition.START).adjustment(NbAdjustment.NOOP);
+
+ const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
+ const overlayRef = overlayService.create({ positionStrategy: strategy });
+ overlayRef.attach(new NbComponentPortal(PortalComponent));
+
+ expect(withPositionsSpy).toHaveBeenCalledTimes(1);
+ expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([{
+ originX: 'start',
+ originY: 'center',
+ overlayX: 'end',
+ overlayY: 'center',
+ offsetX: -15,
+ }]));
+ });
+
+ it('should create strategy with position end and adjustment noop', () => {
+ const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();
+
+ strategy.position(NbPosition.END).adjustment(NbAdjustment.NOOP);
+
+ const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
+ const overlayRef = overlayService.create({ positionStrategy: strategy });
+ overlayRef.attach(new NbComponentPortal(PortalComponent));
+
+ expect(withPositionsSpy).toHaveBeenCalledTimes(1);
+ expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([{
+ originX: 'end',
+ originY: 'center',
+ overlayX: 'start',
+ overlayY: 'center',
+ offsetX: 15,
+ }]));
+ });
+});

src/framework/theme/components/cdk/overlay/overlay-position.ts

@@ -50,10 +50,15 @@ const POSITIONS = {
  [NbPosition.TOP](offset) {
  return { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset };
  },
+ [NbPosition.START](offset) {
+ return this[NbPosition.LEFT](offset);
+ },
+ [NbPosition.END](offset) {
+ return this[NbPosition.RIGHT](offset);
+ },
 };
 
 const COUNTER_CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.LEFT, NbPosition.BOTTOM, NbPosition.RIGHT];
-const NOOP_POSITIONS = [NbPosition.TOP, NbPosition.BOTTOM, NbPosition.LEFT, NbPosition.RIGHT];
 const CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.RIGHT, NbPosition.BOTTOM, NbPosition.LEFT];
 const VERTICAL_POSITIONS = [NbPosition.BOTTOM, NbPosition.TOP];
 const HORIZONTAL_POSITIONS = [NbPosition.START, NbPosition.END];
@@ -126,7 +131,7 @@ export class NbAdjustableConnectedPositionStrategy
  protected createPositions(): NbPosition[] {
  switch (this._adjustment) {
  case NbAdjustment.NOOP:
- return NOOP_POSITIONS.filter(position => this._position === position);
+ return [ this._position ];
  case NbAdjustment.CLOCKWISE:
  return this.reorderPreferredPositions(CLOCKWISE_POSITIONS);
  case NbAdjustment.COUNTERCLOCKWISE: