fix(tooltip): add angular positions classes (#2048)

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

@@ -117,4 +117,34 @@ describe('NbAdjustableConnectedPositionStrategy', () => {
  { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 15 },
  ]));
  });
+
+ it('should map left position to start', () => {
+ const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();
+
+ strategy.position(NbPosition.LEFT).adjustment(NbAdjustment.HORIZONTAL);
+
+ const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
+ const overlayRef = overlayService.create({ positionStrategy: strategy });
+ overlayRef.attach(new NbComponentPortal(PortalComponent));
+
+ expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([
+ { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -15 },
+ { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 15 },
+ ]));
+ });
+
+ it('should map right position to end', () => {
+ const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();
+
+ strategy.position(NbPosition.RIGHT).adjustment(NbAdjustment.HORIZONTAL);
+
+ const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
+ const overlayRef = overlayService.create({ positionStrategy: strategy });
+ overlayRef.attach(new NbComponentPortal(PortalComponent));
+
+ expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([
+ { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 15 },
+ { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -15 },
+ ]));
+ });
 });

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

@@ -209,11 +209,23 @@ export class NbAdjustableConnectedPositionStrategy
  }
 
  protected reorderPreferredPositions(positions: NbPosition[]): NbPosition[] {
- const startPositionIndex = positions.indexOf(this._position);
+ // Physical positions should be mapped to logical as adjustments use logical positions.
+ const startPositionIndex = positions.indexOf(this.mapToLogicalPosition(this._position));
  const firstPart = positions.slice(startPositionIndex);
  const secondPart = positions.slice(0, startPositionIndex);
  return firstPart.concat(secondPart);
  }
+
+ protected mapToLogicalPosition(position: NbPosition): NbPosition {
+ if (position === NbPosition.LEFT) {
+ return NbPosition.START;
+ }
+ if (position === NbPosition.RIGHT) {
+ return NbPosition.END;
+ }
+
+ return position;
+ }
 }
 
 export class NbGlobalPositionStrategy extends GlobalPositionStrategy {

src/framework/theme/components/tooltip/tooltip.component.scss

@@ -4,9 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-:host {
- $arrow-size: 6px;
+@import '../../styles/core/mixins';
+
+$arrow-size: 6px;
 
+:host {
  z-index: 10000;
 
  .content {
@@ -41,27 +43,117 @@
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
  }
+}
 
- &.bottom .arrow {
- top: -#{$arrow-size};
+:host(.bottom) {
+ .arrow {
+ top: -$arrow-size;
  left: calc(50% - #{$arrow-size});
  }
+}
 
- &.left .arrow {
- right: round(-$arrow-size - $arrow-size / 2.5);
+:host(.bottom-start) {
+ .arrow {
+ top: -$arrow-size;
+ @include nb-ltr(right, $arrow-size);
+ @include nb-rtl(left, $arrow-size);
+ }
+}
+
+:host(.bottom-end) {
+ .arrow {
+ top: -$arrow-size;
+ @include nb-ltr(left, $arrow-size);
+ @include nb-rtl(right, $arrow-size);
+ }
+}
+
+:host(.left),
+:host(.start) {
+ .arrow {
+ $inline-offset: round(-$arrow-size - $arrow-size / 2.5);
+ @include nb-ltr() {
+ right: $inline-offset;
+ transform: rotate(90deg);
+ };
+ @include nb-rtl() {
+ left: $inline-offset;
+ transform: rotate(270deg);
+ };
  top: calc(50% - #{$arrow-size / 2.5});
+ }
+}
+
+:host(.start-top) {
+ .arrow {
+ right: round(-$arrow-size - $arrow-size / 2.5);
+ bottom: $arrow-size;
+ transform: rotate(90deg);
+ }
+}
+
+:host(.start-bottom) {
+ .arrow {
+ right: round(-$arrow-size - $arrow-size / 2.5);
+ top: $arrow-size;
  transform: rotate(90deg);
  }
+}
 
- &.top .arrow {
- bottom: -#{$arrow-size};
+:host(.top) {
+ .arrow {
+ bottom: -$arrow-size;
  left: calc(50% - #{$arrow-size});
  transform: rotate(180deg);
  }
+}
 
- &.right .arrow {
- left: round(-$arrow-size - $arrow-size / 2.5);
+:host(.top-start) {
+ .arrow {
+ bottom: calc(-1 * #{$arrow-size} + 1px);
+ @include nb-ltr(right, $arrow-size);
+ @include nb-rtl(left, $arrow-size);
+ transform: rotate(180deg);
+ }
+}
+
+:host(.top-end) {
+ .arrow {
+ bottom: calc(-#{$arrow-size} + 1px);
+ @include nb-ltr(left, $arrow-size);
+ @include nb-rtl(right, $arrow-size);
+ transform: rotate(180deg);
+ }
+}
+
+:host(.right),
+:host(.end) {
+ .arrow {
+ $inline-offset: round(-$arrow-size - $arrow-size / 2.5);
+ @include nb-ltr() {
+ left: $inline-offset;
+ transform: rotate(270deg);
+ };
+ @include nb-rtl() {
+ right: $inline-offset;
+ transform: rotate(90deg);
+ };
  top: calc(50% - #{$arrow-size / 2.5});
+ }
+}
+
+:host(.end-top) {
+ .arrow {
+ left: calc(-#{$arrow-size} - #{$arrow-size} / 2.5);
+ bottom: $arrow-size;
+ transform: rotate(270deg);
+ }
+}
+
+:host(.end-bottom) {
+ .arrow {
+ left: calc(-#{$arrow-size} - #{$arrow-size} / 2.5);
+ top: $arrow-size;
  transform: rotate(270deg);
  }
 }

src/playground/with-layout/tooltip/tooltip-placements.component.html

@@ -1,4 +1,6 @@
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Top</button>
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton>Right</button>
+<button nbTooltip="This is a tooltip" nbTooltipPlacement="end" nbButton>End</button>
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton>Bottom</button>
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton>Left</button>
+<button nbTooltip="This is a tooltip" nbTooltipPlacement="start" nbButton>Start</button>