feat: Removes Renderer2 to be compatible with ivy.

apps/barista/src/pages/overview-page/overview-page.ts

@@ -27,7 +27,7 @@ import { Subscription, fromEvent } from 'rxjs';
 import { BaCategoryNavigationContents } from '@dynatrace/barista-components/barista-definitions';
 import { BaPage } from '../../pages/page-outlet';
 import { BaTile } from '../../layout/tile/tile';
-import { readKeyCode } from '@dynatrace/barista-components/core';
+import { _readKeyCode } from '@dynatrace/barista-components/core';
 
 const LOCALSTORAGEKEY = 'baristaGridview';
 
@@ -70,7 +70,7 @@ export class BaOverviewPage implements AfterViewInit, BaPage, OnDestroy {
 
     this._keyUpSubscription = fromEvent(document, 'keyup').subscribe(
       (evt: KeyboardEvent) => {
-        const keyCode = readKeyCode(evt);
+        const keyCode = _readKeyCode(evt);
         if (keyCode >= A && keyCode <= Z) {
           this._focusItem(evt.key.toLowerCase());
         }

components/autocomplete/src/autocomplete-trigger.ts

@@ -43,7 +43,6 @@ import {
   OnDestroy,
   Optional,
   Provider,
-  Renderer2,
   forwardRef,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -75,7 +74,7 @@ import {
   _countGroupLabelsBeforeOption,
   _getOptionScrollPosition,
   isDefined,
-  readKeyCode,
+  _readKeyCode,
   stringify,
   DtFlexibleConnectedPositionStrategy,
 } from '@dynatrace/barista-components/core';
@@ -253,11 +252,10 @@ export class DtAutocompleteTrigger<T>
   /** Old value of the native input. Used to work around issues with the `input` event on IE. */
   private _previousValue: string | number | null;
 
-  private _disposableFns: Array<() => void> = [];
+  private _destroy$ = new Subject<void>();
 
   constructor(
     private _element: ElementRef<HTMLInputElement>,
-    private _renderer: Renderer2,
     private _overlay: Overlay,
     private _changeDetectorRef: ChangeDetectorRef,
     private _viewportResizer: DtViewportResizer,
@@ -275,22 +273,23 @@ export class DtAutocompleteTrigger<T>
     // tslint:disable-next-line:strict-type-predicates
     if (typeof window !== 'undefined') {
       _zone.runOutsideAngular(() => {
-        this._disposableFns.push(
-          this._renderer.listen(window, 'blur', () => {
+        fromEvent(window, 'blur')
+          .pipe(takeUntil(this._destroy$))
+          .subscribe(() => {
             // If the user blurred the window while the autocomplete is focused, it means that it'll be
             // refocused when they come back. In this case we want to skip the first focus event, if the
             // pane was closed, in order to avoid reopening it unintentionally.
             this._canOpenOnNextFocus =
               document.activeElement !== this._element.nativeElement ||
               this.panelOpen;
-          }),
-        );
+          });
       });
     }
 
     if (this._viewportResizer) {
-      this._viewportSubscription = this._viewportResizer
+      this._viewportResizer
         .change()
+        .pipe(takeUntil(this._destroy$))
         .subscribe(() => {
           if (this.panelOpen && this._overlayRef) {
             this._overlayRef.updateSize({ maxWidth: this._getPanelWidth() });
@@ -300,9 +299,8 @@ export class DtAutocompleteTrigger<T>
   }
 
   ngOnDestroy(): void {
-    this._disposableFns.forEach(fn => {
-      fn();
-    });
+    this._destroy$.next();
+    this._destroy$.complete();
     this._viewportSubscription.unsubscribe();
     this._componentDestroyed = true;
     this._destroyPanel();
@@ -395,7 +393,7 @@ export class DtAutocompleteTrigger<T>
 
   /** @internal Handler for the users key down events. */
   _handleKeydown(event: KeyboardEvent): void {
-    const keyCode = readKeyCode(event);
+    const keyCode = _readKeyCode(event);
 
     // Prevent the default action on all escape key presses. This is here primarily to bring IE
     // in line with other browsers. By default, pressing escape on IE will cause it to revert
@@ -437,7 +435,7 @@ export class DtAutocompleteTrigger<T>
       this._overlayRef = this._overlay.create(this._getOverlayConfig());
 
       this._overlayRef.keydownEvents().subscribe(event => {
-        const keyCode = readKeyCode(event);
+        const keyCode = _readKeyCode(event);
         // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
         // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
         if (keyCode === ESCAPE || (keyCode === UP_ARROW && event.altKey)) {

components/breadcrumbs/src/breadcrumbs-item.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 /**
  * A breadcrumbs item that can be used within the `<dt-breadcrumbs>`.
@@ -30,24 +30,17 @@ import { Directive, ElementRef, Renderer2 } from '@angular/core';
   },
 })
 export class DtBreadcrumbsItem2 {
-  constructor(
-    private readonly _elementRef: ElementRef<HTMLAnchorElement>,
-    private readonly _renderer: Renderer2,
-  ) {}
+  constructor(private readonly _elementRef: ElementRef<HTMLAnchorElement>) {}
 
   /** @internal */
   _setCurrent(current: boolean): void {
-    if (current) {
-      this._renderer.setAttribute(
-        this._elementRef.nativeElement,
-        'aria-current',
-        'page',
-      );
-    } else {
-      this._renderer.removeAttribute(
-        this._elementRef.nativeElement,
-        'aria-current',
-      );
+    const element: Element = this._elementRef.nativeElement;
+    if (element && element.setAttribute) {
+      if (current) {
+        element.setAttribute('aria-current', 'page');
+      } else {
+        element.removeAttribute('aria-current');
+      }
     }
   }
 }

components/button-group/src/button-group.ts

@@ -40,7 +40,7 @@ import {
   HasTabIndex,
   mixinColor,
   mixinTabIndex,
-  readKeyCode,
+  _readKeyCode,
 } from '@dynatrace/barista-components/core';
 
 export class DtButtonGroupBase {
@@ -281,7 +281,7 @@ export class DtButtonGroupItem<T> extends _DtButtonGroupItem
 
   /** @internal Ensures the option is selected when activated from the keyboard. */
   _handleKeydown(event: KeyboardEvent): void {
-    const keyCode = readKeyCode(event);
+    const keyCode = _readKeyCode(event);
     if (keyCode === ENTER || keyCode === SPACE) {
       this._onSelect(event);
 

components/button/src/button.ts

@@ -25,7 +25,6 @@ import {
   Input,
   OnDestroy,
   QueryList,
-  Renderer2,
   ViewEncapsulation,
 } from '@angular/core';
 import { NEVER, Subscription } from 'rxjs';
@@ -37,7 +36,7 @@ import {
   HasElementRef,
   mixinColor,
   mixinDisabled,
-  replaceCssClass,
+  _replaceCssClass,
 } from '@dynatrace/barista-components/core';
 import { DtIcon } from '@dynatrace/barista-components/icon';
 
@@ -95,7 +94,7 @@ export class DtButton extends _DtButtonMixinBase
   set variant(value: ButtonVariant) {
     const variant = value || defaultVariant;
     if (variant !== this._variant) {
-      this._replaceCssClass(variant, this._variant);
+      this.__replaceCssClass(variant, this._variant);
       this._variant = variant;
     }
   }
@@ -111,7 +110,6 @@ export class DtButton extends _DtButtonMixinBase
   constructor(
     elementRef: ElementRef,
     private _focusMonitor: FocusMonitor,
-    private _renderer: Renderer2,
     private _changeDetectorRef: ChangeDetectorRef,
   ) {
     super(elementRef);
@@ -148,12 +146,11 @@ export class DtButton extends _DtButtonMixinBase
     return this._elementRef.nativeElement;
   }
 
-  private _replaceCssClass(newClass?: string, oldClass?: string): void {
-    replaceCssClass(
+  private __replaceCssClass(newClass?: string, oldClass?: string): void {
+    _replaceCssClass(
       this._elementRef,
       `dt-button-${oldClass}`,
       `dt-button-${newClass}`,
-      this._renderer,
     );
   }
 }
@@ -185,10 +182,9 @@ export class DtAnchor extends DtButton {
   constructor(
     elementRef: ElementRef,
     focusMonitor: FocusMonitor,
-    renderer: Renderer2,
     changeDetectorRef: ChangeDetectorRef,
   ) {
-    super(elementRef, focusMonitor, renderer, changeDetectorRef);
+    super(elementRef, focusMonitor, changeDetectorRef);
   }
 
   /**

components/chart/src/heatfield/chart-heatfield.ts

@@ -34,7 +34,7 @@ import {
   Constructor,
   isDefined,
   mixinColor,
-  readKeyCode,
+  _readKeyCode,
 } from '@dynatrace/barista-components/core';
 import { clamp, round } from 'lodash';
 import { Subject } from 'rxjs';
@@ -241,7 +241,7 @@ export class DtChartHeatfield extends _DtHeatfieldMixinBase
    * @internal
    */
   _handleKeydown(event: KeyboardEvent): void {
-    if (readKeyCode(event) === ENTER) {
+    if (_readKeyCode(event) === ENTER) {
       this._toggleActive();
     }
   }

components/chart/src/range/range.ts

@@ -31,7 +31,6 @@ import {
   OnDestroy,
   Output,
   QueryList,
-  Renderer2,
   TemplateRef,
   ViewChild,
   ViewChildren,
@@ -42,11 +41,11 @@ import { BehaviorSubject, Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 
 import {
-  addCssClass,
-  getElementBoundingClientRect,
+  _addCssClass,
+  _getElementBoundingClientRect,
   isNumber,
-  readKeyCode,
-  removeCssClass,
+  _readKeyCode,
+  _removeCssClass,
 } from '@dynatrace/barista-components/core';
 import { dtFormatDateRange } from '@dynatrace/barista-components/formatters';
 
@@ -281,7 +280,6 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
     public _viewContainerRef: ViewContainerRef,
     private _elementRef: ElementRef<HTMLElement>,
     private _changeDetectorRef: ChangeDetectorRef,
-    private _renderer: Renderer2,
   ) {}
 
   ngOnDestroy(): void {
@@ -316,7 +314,7 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
   /** @internal Reflects styles, value and validity to the dom. */
   _reflectToDom(): void {
     this._maxWidth =
-      this._maxWidth || getElementBoundingClientRect(this._elementRef).width;
+      this._maxWidth || _getElementBoundingClientRect(this._elementRef).width;
     this._reflectStyleToDom();
     this._reflectValueToDom();
     this._reflectRangeValid();
@@ -377,12 +375,12 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
    * @param handle indicates whether the left or the right handle triggered the event
    */
   _handleKeyDown(event: KeyboardEvent, handle: string): void {
-    if (readKeyCode(event) === TAB) {
+    if (_readKeyCode(event) === TAB) {
       // we want to stay in our focus trap so continue
       return;
     }
 
-    if ([BACKSPACE, DELETE].includes(readKeyCode(event))) {
+    if ([BACKSPACE, DELETE].includes(_readKeyCode(event))) {
       // if the backspace or delete is pressed on the selected area we want to close it
       if (handle === DtSelectionAreaEventTarget.SelectedArea) {
         this._handleOverlayClose();
@@ -424,9 +422,9 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
    */
   _reflectRangeReleased(add: boolean): void {
     if (add) {
-      addCssClass(this._elementRef.nativeElement, DT_RANGE_RELEASED_CLASS);
+      _addCssClass(this._elementRef.nativeElement, DT_RANGE_RELEASED_CLASS);
     } else {
-      removeCssClass(this._elementRef.nativeElement, DT_RANGE_RELEASED_CLASS);
+      _removeCssClass(this._elementRef.nativeElement, DT_RANGE_RELEASED_CLASS);
     }
   }
 
@@ -516,9 +514,9 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
    */
   private _reflectRangeValid(): void {
     if (!this._valid) {
-      addCssClass(this._elementRef.nativeElement, DT_RANGE_INVALID_CLASS);
+      _addCssClass(this._elementRef.nativeElement, DT_RANGE_INVALID_CLASS);
     } else {
-      removeCssClass(this._elementRef.nativeElement, DT_RANGE_INVALID_CLASS);
+      _removeCssClass(this._elementRef.nativeElement, DT_RANGE_INVALID_CLASS);
     }
   }
 
@@ -544,37 +542,23 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
     const displayValue = dtFormatDateRange(this.value[0], this.value[1]);
 
     if (this._rangeElementRef && this._rangeElementRef.first) {
-      this._renderer.setAttribute(
-        this._rangeElementRef.first.nativeElement,
-        'aria-valuenow',
-        `${this.value.join('-')}`,
-      );
-      this._renderer.setAttribute(
-        this._rangeElementRef.first.nativeElement,
-        'aria-valuetext',
-        displayValue,
-      );
+      const element: Element = this._rangeElementRef.first.nativeElement;
+      if (element && element.setAttribute) {
+        element.setAttribute('aria-valuenow', `${this.value.join('-')}`);
+        element.setAttribute('aria-valuetext', displayValue);
+      }
     }
   }
 
   /** Updates the selection area styling according to the actual range */
   private _reflectStyleToDom(): void {
     if (this._rangeElementRef && this._rangeElementRef.first) {
-      this._renderer.setStyle(
-        this._rangeElementRef.first.nativeElement,
-        'opacity',
-        `${+!this._rangeHidden}`,
-      );
-      this._renderer.setStyle(
-        this._rangeElementRef.first.nativeElement,
-        'left',
-        `${this._rangeArea.left}px`,
-      );
-      this._renderer.setStyle(
-        this._rangeElementRef.first.nativeElement,
-        'width',
-        `${this._rangeArea.width}px`,
-      );
+      const element: HTMLElement = this._rangeElementRef.first.nativeElement;
+      if (element && element.style) {
+        element.style.opacity = `${+!this._rangeHidden}`;
+        element.style.left = `${this._rangeArea.left}px`;
+        element.style.width = `${this._rangeArea.width}px`;
+      }
     }
   }
 }