refactor(ngrid): remove UnRx as decorator (#92)

libs/ngrid-material/cell-tooltip/src/lib/cell-tooltip.directive.ts

@@ -16,8 +16,7 @@ import { ScrollDispatcher } from '@angular/cdk/scrolling';
 import { Platform} from '@angular/cdk/platform';
 import { TooltipPosition, MatTooltipDefaultOptions, MatTooltip, MAT_TOOLTIP_SCROLL_STRATEGY, MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
 
-import { UnRx } from '@pebula/utils';
-import { PblNgridComponent, PblNgridPluginController, NgridPlugin, PblNgridConfigService } from '@pebula/ngrid';
+import { PblNgridComponent, PblNgridPluginController, NgridPlugin, PblNgridConfigService, utils } from '@pebula/ngrid';
 import { PblNgridCellEvent } from '@pebula/ngrid/target-events';
 
 declare module '@pebula/ngrid/lib/grid/services/config' {
@@ -57,7 +56,6 @@ export interface CellTooltipOptions {
 
 @NgridPlugin({ id: PLUGIN_KEY, factory: 'create' })
 @Directive({ selector: '[cellTooltip]', exportAs: 'pblOverflowTooltip' })
-@UnRx()
 export class PblNgridCellTooltipDirective<T> implements CellTooltipOptions, OnDestroy {
   static readonly PLUGIN_KEY: 'cellTooltip' = PLUGIN_KEY;
 
@@ -110,7 +108,7 @@ export class PblNgridCellTooltipDirective<T> implements CellTooltipOptions, OnDe
     ];
 
     configService.onUpdate('cellTooltip')
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe( cfg => this.lastConfig = cfg.curr );
 
     if (table.isInit) {
@@ -134,18 +132,19 @@ export class PblNgridCellTooltipDirective<T> implements CellTooltipOptions, OnDe
   ngOnDestroy(): void {
     this._removePlugin(this.table);
     this.killTooltip();
+    utils.unrx.kill(this);
   }
 
   private init(pluginCtrl: PblNgridPluginController): void {
     // Depends on target-events plugin
     // if it's not set, create it.
     const targetEventsPlugin = pluginCtrl.getPlugin('targetEvents') || pluginCtrl.createPlugin('targetEvents');
     targetEventsPlugin.cellEnter
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe( event => this.cellEnter(event) );
 
     targetEventsPlugin.cellLeave
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe( event => this.cellLeave(event) );
   }
 

libs/ngrid-material/paginator/src/lib/table-paginator.component.ts

@@ -4,13 +4,13 @@ import {
   Component,
   Input,
   Optional,
-  ViewEncapsulation
+  ViewEncapsulation,
+  OnDestroy,
 } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 
-import { UnRx } from '@pebula/utils';
-import { PblPagingPaginator, PblPaginatorChangeEvent, PblNgridComponent } from '@pebula/ngrid';
+import { PblPagingPaginator, PblPaginatorChangeEvent, PblNgridComponent, utils } from '@pebula/ngrid';
 
 const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, 100];
 
@@ -24,8 +24,7 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, 100];
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-@UnRx()
-export class PblPaginatorComponent {
+export class PblPaginatorComponent implements OnDestroy {
   pages: number[] = [];
   pageSizes: number[] = DEFAULT_PAGE_SIZE_OPTIONS.slice();
 
@@ -42,13 +41,13 @@ export class PblPaginatorComponent {
       return;
     }
     if (this._paginator) {
-      UnRx.kill(this, this._paginator);
+      utils.unrx.kill(this, this._paginator);
     }
     this._paginator = value;
     if (value) {
       // pagination.onChange is BehaviorSubject so handlePageChange will trigger
       value.onChange
-        .pipe(UnRx(this, value))
+        .pipe(utils.unrx(this, value))
         .subscribe( event => this.handlePageChange(event) );
       this.updatePageSizes();
     }
@@ -74,10 +73,14 @@ export class PblPaginatorComponent {
       this.table = table;
     }
     _intl.changes
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe(() => this.cdr.markForCheck());
   }
 
+  ngOnDestroy(): void {
+    utils.unrx.kill(this);
+  }
+
   private updatePageSizes(): void {
     if (this.paginator && this.pageSizes.indexOf(this.paginator.perPage) === -1) {
       this.pageSizes.push(this.paginator.perPage);

libs/ngrid-material/selection-column/src/lib/checkbox-plugin.directive.ts

@@ -1,7 +1,6 @@
 import { Directive, Injector, Input, OnDestroy, ComponentFactoryResolver, ComponentRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 
-import { UnRx } from '@pebula/utils';
 import { PblNgridComponent, PblNgridPluginController, NgridPlugin } from '@pebula/ngrid';
 
 import { PblNgridCheckboxComponent } from './table-checkbox.component';
@@ -16,7 +15,6 @@ const PLUGIN_KEY: 'matCheckboxSelection' = 'matCheckboxSelection';
 
 @NgridPlugin({ id: PLUGIN_KEY })
 @Directive({ selector: 'pbl-ngrid[matCheckboxSelection]' })
-@UnRx()
 export class PblNgridMatCheckboxSelectionDirective implements OnDestroy {
 
   @Input() get isCheckboxDisabled() { return this._isCheckboxDisabled; }

libs/ngrid-material/selection-column/src/lib/table-checkbox.component.ts

@@ -1,14 +1,14 @@
-import { Component, Input, ViewChild, ViewEncapsulation, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, ViewChild, ViewEncapsulation, AfterViewInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { SelectionModel } from '@angular/cdk/collections';
 import { ThemePalette } from '@angular/material/core';
 
-import { UnRx } from '@pebula/utils';
 import {
   PblNgridComponent,
   PblNgridHeaderCellDefDirective,
   PblNgridCellDefDirective,
   PblNgridFooterCellDefDirective,
   PblNgridPluginController,
+  utils,
 } from '@pebula/ngrid';
 
 const ALWAYS_FALSE_FN = () => false;
@@ -20,8 +20,7 @@ const ALWAYS_FALSE_FN = () => false;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-@UnRx()
-export class PblNgridCheckboxComponent implements AfterViewInit {
+export class PblNgridCheckboxComponent implements AfterViewInit, OnDestroy {
   /**
    * Unique name for the checkbox column.
    * When not set, the name 'checkbox' is used.
@@ -96,7 +95,7 @@ export class PblNgridCheckboxComponent implements AfterViewInit {
   constructor(public table: PblNgridComponent<any>, private cdr: ChangeDetectorRef) {
     const pluginCtrl = PblNgridPluginController.find(table);
     pluginCtrl.events
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe( e => {
         if (e.kind === 'onDataSource') {
           this.selection = e.curr.selection;
@@ -115,6 +114,10 @@ export class PblNgridCheckboxComponent implements AfterViewInit {
     registry.addMulti('footerCell', this.footerDef);
   }
 
+  ngOnDestroy(): void {
+    utils.unrx.kill(this);
+  }
+
   masterToggle(): void {
     if (this.allSelected) {
       this.selection.clear();
@@ -136,11 +139,11 @@ export class PblNgridCheckboxComponent implements AfterViewInit {
   }
 
   private setupSelection(): void {
-    UnRx.kill(this, this.table);
+    utils.unrx.kill(this, this.table);
     if (this._selection) {
       this.length = this.selection.selected.length;
       this.selection.changed
-        .pipe(UnRx(this, this.table))
+        .pipe(utils.unrx(this, this.table))
         .subscribe( () => {
           const { length } = this.getCollection().filter(data => !this._isCheckboxDisabled(data));
           this.allSelected = !this.selection.isEmpty() && this.selection.selected.length === length;

libs/ngrid-material/sort/src/lib/mat-sort.directive.ts

@@ -1,8 +1,7 @@
 import { Directive, OnDestroy } from '@angular/core';
 import { Sort, MatSort, MatSortHeader, SortDirection } from '@angular/material/sort';
 
-import { UnRx } from '@pebula/utils';
-import { PblNgridComponent, PblNgridPluginController, NgridPlugin, PblNgridSortDefinition, PblDataSource } from '@pebula/ngrid';
+import { PblNgridComponent, PblNgridPluginController, NgridPlugin, PblNgridSortDefinition, PblDataSource, utils } from '@pebula/ngrid';
 
 declare module '@pebula/ngrid/lib/ext/types' {
   interface PblNgridPluginExtension {
@@ -13,7 +12,6 @@ const PLUGIN_KEY: 'matSort' = 'matSort';
 
 @NgridPlugin({ id: PLUGIN_KEY })
 @Directive({ selector: 'pbl-ngrid[matSort]', exportAs: 'pblMatSort' })
-@UnRx()
 export class PblNgridMatSortDirective implements OnDestroy {
   private _removePlugin: (table: PblNgridComponent<any>) => void;
 
@@ -22,7 +20,7 @@ export class PblNgridMatSortDirective implements OnDestroy {
 
     let origin: 'ds' | 'click' = 'click';
     this.sort.sortChange
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe( s => {
         this.onSort(s, origin);
         origin = 'click';
@@ -69,19 +67,20 @@ export class PblNgridMatSortDirective implements OnDestroy {
           }
         }
         if (e.kind === 'onDataSource') {
-          UnRx.kill(this, e.prev);
+          utils.unrx.kill(this, e.prev);
           if (this.sort && this.sort.active) {
             this.onSort({ active: this.sort.active, direction: this.sort.direction || 'asc' }, origin);
           }
           table.ds.sortChange
-            .pipe(UnRx(this, e.curr))
+            .pipe(utils.unrx(this, e.curr))
             .subscribe( event => { handleDataSourceSortChange(event); });
         }
       });
   }
 
   ngOnDestroy(): void {
     this._removePlugin(this.table);
+    utils.unrx.kill(this);
   }
 
   private onSort(sort: Sort, origin: 'ds' | 'click'): void {

libs/ngrid/block-ui/src/lib/block-ui/block-ui-plugin.ts

@@ -2,8 +2,7 @@ import { Observable, isObservable } from 'rxjs';
 import { Directive, EmbeddedViewRef, Input, OnDestroy } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
-import { UnRx } from '@pebula/utils';
-import { PblNgridComponent, PblNgridPluginController, NgridPlugin } from '@pebula/ngrid';
+import { PblNgridComponent, PblNgridPluginController, NgridPlugin, utils } from '@pebula/ngrid';
 
 declare module '@pebula/ngrid/lib/ext/types' {
   interface PblNgridPluginExtension {
@@ -15,7 +14,6 @@ const PLUGIN_KEY: 'blockUi' = 'blockUi';
 
 @NgridPlugin({ id: PLUGIN_KEY })
 @Directive({ selector: 'pbl-ngrid[blockUi]', exportAs: 'blockUi' })
-@UnRx()
 export class PblNgridBlockUiPluginDirective<T> implements OnDestroy {
 
   /**
@@ -53,10 +51,10 @@ export class PblNgridBlockUiPluginDirective<T> implements OnDestroy {
 
     if (isObservable(value) && this._blockUi !== value) {
       if (isObservable(this._blockUi)) {
-        UnRx.kill(this, this._blockUi);
+        utils.unrx.kill(this, this._blockUi);
       }
       this._blockUi = value;
-      value.pipe(UnRx(this, this._blockUi)).subscribe( state => {
+      value.pipe(utils.unrx(this, this._blockUi)).subscribe( state => {
         this._blockInProgress = state;
         this.setupBlocker();
       });
@@ -92,18 +90,18 @@ export class PblNgridBlockUiPluginDirective<T> implements OnDestroy {
         if (event.kind === 'onDataSource') {
           const { prev, curr } = event;
           if (prev) {
-            UnRx.kill(this, prev);
+            utils.unrx.kill(this, prev);
           }
           curr.onSourceChanging
-            .pipe(UnRx(this, curr))
+            .pipe(utils.unrx(this, curr))
             .subscribe( () => {
               if (this._blockUi === 'auto') {
                 this._blockInProgress = true;
                 this.setupBlocker();
               }
             });
           curr.onSourceChanged
-            .pipe(UnRx(this, curr))
+            .pipe(utils.unrx(this, curr))
             .subscribe( () => {
               if (this._blockUi === 'auto') {
                 this._blockInProgress = false;
@@ -116,6 +114,7 @@ export class PblNgridBlockUiPluginDirective<T> implements OnDestroy {
 
 
   ngOnDestroy(): void {
+    utils.unrx.kill(this);
     this._removePlugin(this.grid);
   }
 

libs/ngrid/clipboard/src/lib/clipboard.plugin.ts

@@ -5,8 +5,7 @@ import { Directive, Injector, OnDestroy, Input } from '@angular/core';
 // TODO: remove internal implementation in the next version of cdk-experimental (right after 8.1.3)
 import { Clipboard } from './clipboard.service';
 
-import { UnRx } from '@pebula/utils';
-import { PblNgridComponent, PblNgridPluginController, NgridPlugin, PblNgridConfigService } from '@pebula/ngrid';
+import { PblNgridComponent, PblNgridPluginController, NgridPlugin, PblNgridConfigService, utils } from '@pebula/ngrid';
 
 declare module '@pebula/ngrid/lib/ext/types' {
   interface PblNgridPluginExtension {
@@ -44,7 +43,6 @@ export const PLUGIN_KEY: 'clipboard' = 'clipboard';
 
 @NgridPlugin({ id: PLUGIN_KEY, factory: 'create' })
 @Directive({ selector: 'pbl-ngrid[clipboard]', exportAs: 'pblNgridClipboard' })
-@UnRx()
 export class PblNgridClipboardPlugin implements OnDestroy {
 
   static create(grid: PblNgridComponent, injector: Injector): PblNgridClipboardPlugin {
@@ -77,6 +75,7 @@ export class PblNgridClipboardPlugin implements OnDestroy {
   }
 
   ngOnDestroy(): void {
+    utils.unrx.kill(this);
     this._removePlugin(this.grid);
   }
 
@@ -159,7 +158,7 @@ export class PblNgridClipboardPlugin implements OnDestroy {
     targetEvents.keyDown
       .pipe(
         filter( event => this.isCopyEvent(event.source) ),
-        UnRx(this)
+        utils.unrx(this)
       )
       .subscribe( event => this.doCopy() );
   }

libs/ngrid/detail-row/src/lib/detail-row/detail-row-plugin.ts

@@ -1,8 +1,7 @@
-import { Directive, EmbeddedViewRef, EventEmitter, Injector, Input, OnDestroy, Output, ComponentFactoryResolver, ComponentRef } from '@angular/core';
+import { Directive, EventEmitter, Injector, Input, OnDestroy, Output, ComponentFactoryResolver, ComponentRef } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
-import { UnRx } from '@pebula/utils';
-import { PblNgridComponent, PblNgridPluginController, NgridPlugin, PblNgridRowContext } from '@pebula/ngrid';
+import { PblNgridComponent, PblNgridPluginController, NgridPlugin } from '@pebula/ngrid';
 
 import { PblNgridDetailRowComponent } from './row';
 import { PblNgridDetailRowParentRefDirective, PblNgridDefaultDetailRowParentComponent } from './directives';
@@ -36,7 +35,6 @@ export interface PblDetailsRowToggleEvent<T = any> {
 
 @NgridPlugin({ id: PLUGIN_KEY })
 @Directive({ selector: 'pbl-ngrid[detailRow]', exportAs: 'pblNgridDetailRow' })
-@UnRx()
 export class PblNgridDetailRowPluginDirective<T> implements OnDestroy {
   /**
    * Detail row control (none / all rows / selective rows)

libs/ngrid/detail-row/src/lib/detail-row/row.ts

@@ -12,8 +12,7 @@ import {
 import { ENTER, SPACE } from '@angular/cdk/keycodes';
 import { CDK_ROW_TEMPLATE, CdkRow } from '@angular/cdk/table';
 
-import { UnRx } from '@pebula/utils';
-import { PblNgridPluginController, PblNgridRowComponent, PblNgridExtensionApi, EXT_API_TOKEN } from '@pebula/ngrid';
+import { PblNgridPluginController, PblNgridRowComponent, PblNgridExtensionApi, EXT_API_TOKEN, utils } from '@pebula/ngrid';
 
 import { PblNgridDetailRowPluginDirective, PblDetailsRowToggleEvent, PLUGIN_KEY } from './detail-row-plugin';
 
@@ -34,7 +33,6 @@ import { PblNgridDetailRowPluginDirective, PblDetailsRowToggleEvent, PLUGIN_KEY
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-@UnRx()
 export class PblNgridDetailRowComponent extends PblNgridRowComponent implements OnInit, OnDestroy {
 
   get expended(): boolean {
@@ -59,7 +57,7 @@ export class PblNgridDetailRowComponent extends PblNgridRowComponent implements
     this.plugin.addDetailRow(this);
     const tradeEvents = controller.getPlugin('targetEvents');
     tradeEvents.cellClick
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe( event => {
         if (event.type === 'data' && event.row === this.context.$implicit) {
           const { excludeToggleFrom } = this.plugin;
@@ -70,7 +68,7 @@ export class PblNgridDetailRowComponent extends PblNgridRowComponent implements
       });
 
     tradeEvents.rowClick
-      .pipe(UnRx(this))
+      .pipe(utils.unrx(this))
       .subscribe( event => {
         if (!event.root && event.type === 'data' && event.row === this.context.$implicit) {
           this.toggle();
@@ -79,6 +77,7 @@ export class PblNgridDetailRowComponent extends PblNgridRowComponent implements
   }
 
   ngOnDestroy(): void {
+    utils.unrx.kill(this);
     this.plugin.removeDetailRow(this);
   }