feat(overlay, toggle): add offset type parameter to setOffset method

Author: georgianastasov

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxCombo`, `IgxSimpleCombo`:
     - Introduced abillity for hiding the clear icon button when the custom clear icon template is empty.
+- `IgxOverlayService`, `IgxToggleDirective`:
+    - Added an optional `offsetMode` parameter to the `setOffset` method that determines whether to add (by default) or set the offset values using `OffsetMode.Add` and `OffsetMode.Set`.
 
 ## 17.2.0
 ### New Features
@@ -120,6 +122,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`,`IgxSimpleCombo`
     - **Breaking Change** The `displayValue` property now returns the display text as expected (instead of display values in array).
 
+=======
 ## 16.1.5
 ### General
 - `IgxButtonGroup`:

projects/igniteui-angular/src/lib/directives/toggle/README.md

@@ -52,7 +52,7 @@ handlers when the toggle is opened and respectively closed.
 | `close` | --- | `void` | Closes the toggle. |
 | `toggle` | overlaySettings?: `OverlaySettings` | `void` | Closes the toggle. |
 | `reposition` | --- | `void` | Repositions the toggle. |
-| `setOffset`  | Offsets the content's position along the relevant axis precisely by the specified amount. |deltaX, deltaY |
+| `setOffset`  | Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set. | deltaX, deltaY, offsetMode? |
 
 
 

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts

@@ -11,6 +11,7 @@ import { CancelableEventArgs } from '../../core/utils';
 
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { first } from 'rxjs/operators';
+import { OffsetMode } from '../../services/overlay/utilities';
 
 describe('IgxToggle', () => {
     configureTestSuite();
@@ -213,6 +214,34 @@ describe('IgxToggle', () => {
         expect(toggle.closed.emit).toHaveBeenCalled();
     }));
 
+    it('should offset the toggle content correctly using setOffset method and optional offsetMode', () => {
+        const fixture = TestBed.createComponent(IgxToggleActionTestComponent);
+        const component = fixture.componentInstance;
+        const toggle = component.toggle;
+        const overlayId = toggle.overlayId;
+        fixture.detectChanges();
+
+        const overlayService = TestBed.inject(IgxOverlayService);
+        spyOn(overlayService, 'setOffset').and.callThrough();
+        fixture.detectChanges();
+
+        // Set initial offset
+        toggle.setOffset(20, 20);
+        expect(overlayService.setOffset).toHaveBeenCalledWith(overlayId, 20, 20, undefined);
+
+        // Add offset values to the existing ones (default behavior)
+        toggle.setOffset(10, 10);
+        expect(overlayService.setOffset).toHaveBeenCalledWith(overlayId, 10, 10, undefined);
+
+        // Add offset values using OffsetMode.Add
+        toggle.setOffset(20, 20, OffsetMode.Add);
+        expect(overlayService.setOffset).toHaveBeenCalledWith(overlayId, 20, 20, OffsetMode.Add);
+
+        // Set offset values using OffsetMode.Set
+        toggle.setOffset(10, 10, OffsetMode.Set);
+        expect(overlayService.setOffset).toHaveBeenCalledWith(overlayId, 10, 10, OffsetMode.Set);
+    });
+
     it('Toggle should be registered into navigationService if it is passed through identifier', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxToggleServiceInjectComponent);
         fixture.detectChanges();

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -19,7 +19,7 @@ import { filter, first, takeUntil } from 'rxjs/operators';
 import { IgxNavigationService, IToggleView } from '../../core/navigation';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { IPositionStrategy } from '../../services/overlay/position/IPositionStrategy';
-import { OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings } from '../../services/overlay/utilities';
+import { OffsetMode, OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings } from '../../services/overlay/utilities';
 import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs';
 
 export interface ToggleViewEventArgs extends IBaseEventArgs {
@@ -318,10 +318,11 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     }
 
     /**
-     * Offsets the content along the corresponding axis by the provided amount
+     * Offsets the content along the corresponding axis by the provided amount with optional
+     * offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set
      */
-    public setOffset(deltaX: number, deltaY: number) {
-        this.overlayService.setOffset(this._overlayId, deltaX, deltaY);
+    public setOffset(deltaX: number, deltaY: number, offsetMode?: OffsetMode) {
+        this.overlayService.setOffset(this._overlayId, deltaX, deltaY, offsetMode);
     }
 
     /**

projects/igniteui-angular/src/lib/services/overlay/README.md

@@ -99,7 +99,7 @@ this.overlay.show(component, overlaySettings);
 |detach           | Remove overlay with the provided id                                             |id               |
 |detachAll        | Remove all the overlays                                                         |-                |
 |reposition       | Repositions the native element of the component with provided id                |id               |
-|setOffset        | Offsets the content's position along the relevant axis precisely by the specified amount |id, deltaX, deltaY |
+|setOffset        | Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set | id, deltaX, deltaY, offsetMode? |
 
 ###### IPositionStrategy
 

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -34,6 +34,7 @@ import { CloseScrollStrategy } from './scroll/close-scroll-strategy';
 import { NoOpScrollStrategy } from './scroll/NoOpScrollStrategy';
 import {
     HorizontalAlignment,
+    OffsetMode,
     OverlayCancelableEventArgs,
     OverlayEventArgs,
     OverlaySettings,
@@ -820,6 +821,7 @@ describe('igxOverlay', () => {
             const componentElementRect = componentElement.getBoundingClientRect();
             let overlayContentTransform = contentElement.style.transform;
             const firstTransform = 'translate(40px, 40px)';
+            const secondTransform = 'translate(30px, 60px)';
 
             expect(contentElementRect.top).toEqual(componentElementRect.top);
             expect(contentElementRect.left).toEqual(componentElementRect.left);
@@ -832,7 +834,6 @@ describe('igxOverlay', () => {
             const contentElementRectNew = contentElement.getBoundingClientRect();
             const componentElementRectNew = componentElement.getBoundingClientRect();
             overlayContentTransform = contentElement.style.transform;
-            const secondTransform = 'translate(-10px, 20px)';
 
             expect(contentElementRectNew.top).toEqual(componentElementRectNew.top);
             expect(contentElementRectNew.left).toEqual(componentElementRectNew.left);
@@ -847,7 +848,7 @@ describe('igxOverlay', () => {
             overlayInstance.detachAll();
         }));
 
-        it('Should set transformX and transformY correctly in setOffset method', fakeAsync(() => {
+        it('Should offset the overlay content correctly using setOffset method and optional offsetMode', fakeAsync(() => {
             const fixture = TestBed.createComponent(WidthTestOverlayComponent);
             const overlayInstance = fixture.componentInstance.overlay;
 
@@ -862,8 +863,18 @@ describe('igxOverlay', () => {
             expect(overlayInfo.transformX).toEqual(20);
             expect(overlayInfo.transformY).toEqual(20);
 
-            // Set new offset
+            // Add offset values to the existing ones (default behavior)
             overlayInstance.setOffset(id, 10, 10);
+            expect(overlayInfo.transformX).toEqual(30);
+            expect(overlayInfo.transformY).toEqual(30);
+
+            // Add offset values using OffsetMode.Add
+            overlayInstance.setOffset(id, 20, 20, OffsetMode.Add);
+            expect(overlayInfo.transformX).toEqual(50);
+            expect(overlayInfo.transformY).toEqual(50);
+
+            // Set offset values using OffsetMode.Set
+            overlayInstance.setOffset(id, 10, 10, OffsetMode.Set);
             expect(overlayInfo.transformX).toEqual(10);
             expect(overlayInfo.transformY).toEqual(10);
 

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -42,7 +42,8 @@ import {
     PositionSettings,
     RelativePosition,
     RelativePositionStrategy,
-    VerticalAlignment
+    VerticalAlignment,
+    OffsetMode
 } from './utilities';
 import { fadeIn, fadeOut, IAnimationParams, scaleInHorLeft, scaleInHorRight, scaleInVerBottom, scaleInVerTop, scaleOutHorLeft, scaleOutHorRight, scaleOutVerBottom, scaleOutVerTop, slideInBottom, slideInTop, slideOutBottom, slideOutTop } from 'igniteui-angular/animations';
 
@@ -489,24 +490,30 @@ export class IgxOverlayService implements OnDestroy {
     }
 
     /**
-     * Offsets the content along the corresponding axis by the provided amount
+     * Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values
      *
      * @param id Id to offset overlay for
      * @param deltaX Amount of offset in horizontal direction
      * @param deltaY Amount of offset in vertical direction
+     * @param offsetMode Determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set
      * ```typescript
-     * this.overlay.setOffset(id, deltaX, deltaY);
+     * this.overlay.setOffset(id, deltaX, deltaY, offsetMode);
      * ```
      */
-    public setOffset(id: string, deltaX: number, deltaY: number) {
+    public setOffset(id: string, deltaX: number, deltaY: number, offsetMode?: OffsetMode) {
         const info: OverlayInfo = this.getOverlayById(id);
 
         if (!info) {
             return;
         }
 
-        info.transformX = deltaX;
-        info.transformY = deltaY;
+        if (offsetMode === OffsetMode.Set) {
+            info.transformX = deltaX;
+            info.transformY = deltaY;
+        } else {
+            info.transformX += deltaX;
+            info.transformY += deltaY;
+        }
 
         const transformX = info.transformX;
         const transformY = info.transformY;

projects/igniteui-angular/src/lib/services/overlay/utilities.ts

@@ -47,6 +47,14 @@ export enum AbsolutePosition {
     Center = 'center'
 }
 
+/**
+ * Determines whether to add or set the offset values.
+ */
+export enum OffsetMode {
+    Add,
+    Set
+}
+
 // TODO: make this interface
 export class Point {
     constructor(public x: number, public y: number) { }