Merge branch 'master' into mkirova/fix-default-row-height

Author: dkamburov

CHANGELOG.md

@@ -14,6 +14,9 @@ All notable changes for each version of this project will be documented in this
     - Added templatable row dimension headers displayed on the top, above all row headers.
     - Replace the `showPivotConfigurationUI` property with `pivotUI` property, adding ability now to enable/disable the configuration UI and/or the new row dimension headers.
     - Added `sortable` property for each IPivotDimension.
+- `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`.
+
 ### Changes
 - With the removal of the Display Density token, components now get their default sizes from the theme. Default sizes have changed for most components, with it now being medium (previously large). Here's an exhaustive list of all sizable components and their default sizes by theme:
     - `Avatar` - Small (All Themes)

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 along the corresponding axis by the provided amount. |deltaX, deltaY |
+| `setOffset`  | deltaX: `number`, deltaY: `number`, offsetMode?: `OffsetMode` | `void` | 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. |
 
 
 

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 along the corresponding axis by the provided 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,
@@ -847,6 +848,39 @@ describe('igxOverlay', () => {
             overlayInstance.detachAll();
         }));
 
+        it('Should offset the overlay content correctly using setOffset method and optional offsetMode', fakeAsync(() => {
+            const fixture = TestBed.createComponent(WidthTestOverlayComponent);
+            const overlayInstance = fixture.componentInstance.overlay;
+
+            const id = fixture.componentInstance.overlay.attach(SimpleRefComponent);
+            overlayInstance.show(id);
+            fixture.detectChanges();
+            tick();
+
+            // Set initial offset
+            overlayInstance.setOffset(id, 20, 20);
+            const overlayInfo = overlayInstance.getOverlayById(id);
+            expect(overlayInfo.transformX).toEqual(20);
+            expect(overlayInfo.transformY).toEqual(20);
+
+            // 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);
+
+            overlayInstance.detachAll();
+        }));
+
         it('#1690 - click on second filter does not close first one.', fakeAsync(() => {
             const fixture = TestBed.createComponent(TwoButtonsComponent);
             const button1 = fixture.nativeElement.getElementsByClassName('buttonOne')[0];

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

@@ -32,6 +32,7 @@ import { NoOpScrollStrategy } from './scroll/NoOpScrollStrategy';
 import {
     AbsolutePosition,
     HorizontalAlignment,
+    OffsetMode,
     OverlayAnimationEventArgs,
     OverlayCancelableEventArgs,
     OverlayClosingEventArgs,
@@ -489,24 +490,34 @@ 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;
+        switch (offsetMode) {
+            case OffsetMode.Set:
+                info.transformX = deltaX;
+                info.transformY = deltaY;
+                break;
+            case OffsetMode.Add:
+            default:
+                info.transformX += deltaX;
+                info.transformY += deltaY;
+                break;
+        }
 
         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) { }