diff --git a/components/autocomplete/src/autocomplete-trigger.ts b/components/autocomplete/src/autocomplete-trigger.ts index d2ef7df7bb..befb6fc428 100644 --- a/components/autocomplete/src/autocomplete-trigger.ts +++ b/components/autocomplete/src/autocomplete-trigger.ts @@ -23,11 +23,13 @@ import { UP_ARROW, } from '@angular/cdk/keycodes'; import { - FlexibleConnectedPositionStrategy, Overlay, OverlayConfig, OverlayRef, PositionStrategy, + ViewportRuler, + OverlayContainer, + FlexibleConnectedPositionStrategy, } from '@angular/cdk/overlay'; import { DOCUMENT } from '@angular/common'; import { @@ -75,12 +77,14 @@ import { isDefined, readKeyCode, stringify, + DtFlexibleConnectedPositionStrategy, } from '@dynatrace/barista-components/core'; import { DtFormField } from '@dynatrace/barista-components/form-field'; import { DtAutocomplete } from './autocomplete'; import { getDtAutocompleteMissingPanelError } from './autocomplete-errors'; import { DtAutocompleteOrigin } from './autocomplete-origin'; +import { Platform } from '@angular/cdk/platform'; /** Provider that allows the autocomplete to register as a ControlValueAccessor. */ export const DT_AUTOCOMPLETE_VALUE_ACCESSOR: Provider = { @@ -229,8 +233,13 @@ export class DtAutocompleteTrigger */ private _canOpenOnNextFocus = true; - /** Strategy that is used to position the panel. */ - private _positionStrategy: FlexibleConnectedPositionStrategy; + /** + * Strategy that is used to position the panel. + * @breaking-change Switch to only use DtFlexibleConnectedPositionStrategy with 7.0.0 + */ + private _positionStrategy: + | FlexibleConnectedPositionStrategy + | DtFlexibleConnectedPositionStrategy; /** Stream of keyboard events that can close the panel. */ private readonly _closeKeyEventStream = new Subject(); @@ -253,9 +262,15 @@ export class DtAutocompleteTrigger private _changeDetectorRef: ChangeDetectorRef, private _viewportResizer: DtViewportResizer, private _zone: NgZone, - @Optional() @Host() private _formField: DtFormField, + @Optional() @Host() private _formField?: DtFormField, // tslint:disable-next-line:no-any - @Optional() @Inject(DOCUMENT) private _document: any, + @Optional() @Inject(DOCUMENT) private _document?: any, + /** @breaking-change 7.0.0 Make the _viewportRuler non optional. */ + @Optional() private _viewportRuler?: ViewportRuler, + /** @breaking-change 7.0.0 Make the _platform non optional. */ + @Optional() private _platform?: Platform, + /** @breaking-change 7.0.0 Make the _overlayContainer non optional. */ + @Optional() private _overlayContainer?: OverlayContainer, ) { // tslint:disable-next-line:strict-type-predicates if (typeof window !== 'undefined') { @@ -500,9 +515,24 @@ export class DtAutocompleteTrigger } private _getOverlayPosition(): PositionStrategy { - this._positionStrategy = this._overlay - .position() - .flexibleConnectedTo(this._getConnectedElement()) + /** + * @breaking-change Switch to only use the DtFlexibleConnectedPositionStrategy + * with 7.0.0 + */ + const originalPositionStrategy = + this._viewportRuler && this._platform && this._overlayContainer + ? new DtFlexibleConnectedPositionStrategy( + this._getConnectedElement(), + this._viewportRuler, + this._document, + this._platform, + this._overlayContainer, + ) + : this._overlay + .position() + .flexibleConnectedTo(this._getConnectedElement()); + + this._positionStrategy = originalPositionStrategy .withFlexibleDimensions(false) .withPush(false) .withPositions([ diff --git a/components/filter-field/src/filter-field-range/filter-field-range-trigger.ts b/components/filter-field/src/filter-field-range/filter-field-range-trigger.ts index bf1d9552e4..2d9a698ddb 100644 --- a/components/filter-field/src/filter-field-range/filter-field-range-trigger.ts +++ b/components/filter-field/src/filter-field-range/filter-field-range-trigger.ts @@ -17,11 +17,13 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { ESCAPE, UP_ARROW } from '@angular/cdk/keycodes'; import { - FlexibleConnectedPositionStrategy, Overlay, OverlayConfig, OverlayRef, PositionStrategy, + ViewportRuler, + OverlayContainer, + FlexibleConnectedPositionStrategy, } from '@angular/cdk/overlay'; import { ChangeDetectorRef, @@ -31,6 +33,8 @@ import { NgZone, OnDestroy, Renderer2, + Optional, + Inject, } from '@angular/core'; import { EMPTY, @@ -43,9 +47,14 @@ import { } from 'rxjs'; import { filter, map, take } from 'rxjs/operators'; -import { readKeyCode } from '@dynatrace/barista-components/core'; +import { + readKeyCode, + DtFlexibleConnectedPositionStrategy, +} from '@dynatrace/barista-components/core'; import { DtFilterFieldRange } from './filter-field-range'; +import { Platform } from '@angular/cdk/platform'; +import { DOCUMENT } from '@angular/common'; @Directive({ selector: `input[dtFilterFieldRange]`, @@ -115,8 +124,13 @@ export class DtFilterFieldRangeTrigger implements OnDestroy { /** Overlay Reference of the currently open overlay */ private _overlayRef: OverlayRef | null; - /** Strategy that is used to position the panel. */ - private _positionStrategy: FlexibleConnectedPositionStrategy; + /** + * Strategy that is used to position the panel. + * @breaking-change Switch to only use DtFlexibleConnectedPositionStrategy with 7.0.0 + */ + private _positionStrategy: + | FlexibleConnectedPositionStrategy + | DtFlexibleConnectedPositionStrategy; /** Whether the component has already been destroyed */ private _componentDestroyed = false; @@ -139,6 +153,15 @@ export class DtFilterFieldRangeTrigger implements OnDestroy { private _changeDetectorRef: ChangeDetectorRef, zone: NgZone, renderer: Renderer2, + /** @breaking-change 7.0.0 Make the _viewportRuler non-optional. */ + @Optional() private _viewportRuler?: ViewportRuler, + /** @breaking-change 7.0.0 Make the _platform non-optional. */ + @Optional() private _platform?: Platform, + /** @breaking-change 7.0.0 Make the _overlayContainer non-optional. */ + @Optional() private _overlayContainer?: OverlayContainer, + /** @breaking-change 7.0.0 Make the _document non-optional. */ + // tslint:disable-next-line:no-any + @Optional() @Inject(DOCUMENT) private _document?: any, ) { // tslint:disable-next-line:strict-type-predicates if (typeof window !== 'undefined') { @@ -271,9 +294,21 @@ export class DtFilterFieldRangeTrigger implements OnDestroy { /** Returns the overlay position. */ private _getOverlayPosition(): PositionStrategy { - this._positionStrategy = this._overlay - .position() - .flexibleConnectedTo(this._elementRef) + /** + * @breaking-change Switch to only use the DtFlexibleConnectedPositionStrategy + * with 7.0.0 + */ + const originalPositionStrategy = + this._viewportRuler && this._platform && this._overlayContainer + ? new DtFlexibleConnectedPositionStrategy( + this._elementRef, + this._viewportRuler, + this._document, + this._platform, + this._overlayContainer, + ) + : this._overlay.position().flexibleConnectedTo(this._elementRef); + this._positionStrategy = originalPositionStrategy .withFlexibleDimensions(false) .withPush(false) .withPositions([