How to use the @pebula/ngrid.NgridPlugin function in @pebula/ngrid

/**
       * The separator to use when multiple rows are copied
       * @default \n
       */
      rowSeparator?: string;
    };
  }
}

const IS_OSX = /^mac/.test(navigator.platform.toLowerCase())
const DEFAULT_CELL_SEP = '\t';
const DEFAULT_ROW_SEP = '\n';

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 {
    const pluginCtrl = PblNgridPluginController.find(grid);
    return new PblNgridClipboardPlugin(grid, injector, pluginCtrl);
  }

  /**
   * The separator to use when multiple cells are copied.
   * If not set, taken from `PblNgridConfig.clipboard.cellSeparator`
   * @default \t
   */
  @Input() clpCellSep: string;

import { ThemePalette } from '@angular/material/core';

import { UnRx } from '@pebula/utils';
import { PblNgridComponent, PblNgridPluginController, NgridPlugin } from '@pebula/ngrid';

import { PblNgridCheckboxComponent } from './table-checkbox.component';

declare module '@pebula/ngrid/lib/ext/types' {
  interface PblNgridPluginExtension {
    matCheckboxSelection?: PblNgridMatCheckboxSelectionDirective;
  }
}

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; }
  set isCheckboxDisabled(value: (row: any) => boolean ) {
    if (value !== this._isCheckboxDisabled) {
      this._isCheckboxDisabled = value;
      if (this.cmpRef && value) {
        this.cmpRef.instance.isCheckboxDisabled = value;
        this.cmpRef.changeDetectorRef.detectChanges();
      }
    }
  }

  /**

const controller = PblNgridPluginController.find(grid);
  if (controller) {
    const plugin = controller.getPlugin(PLUGIN_KEY);
    if (plugin) {
      return plugin.toggleDetailRow(row, forceState);
    }
  }
}

export interface PblDetailsRowToggleEvent {
  row: T;
  expended: boolean;
  toggle(): void;
}

@NgridPlugin({ id: PLUGIN_KEY })
@Directive({ selector: 'pbl-ngrid[detailRow]', exportAs: 'pblNgridDetailRow' })
@UnRx()
export class PblNgridDetailRowPluginDirective implements OnDestroy {
  /**
   * Detail row control (none / all rows / selective rows)
   *
   * A detail row is an additional row added below a row rendered with the context of the row above it.
   *
   * You can enable/disable detail row for the entire grid by setting `detailRow` to true/false respectively.
   * To control detail row per row, provide a predicate.
   */
  @Input() get detailRow(): ( (index: number, rowData: T) => boolean ) | boolean { return this._detailRow; }
  set detailRow(value: ( (index: number, rowData: T) => boolean ) | boolean ) {
    if (this._detailRow !== value) {
      const grid = this.grid;

import { Directive, Injector, Input, OnDestroy, ComponentFactoryResolver, ComponentRef, DoCheck } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { PblNgridComponent, PblNgridPluginController, NgridPlugin } from '@pebula/ngrid';

import { PblPaginatorComponent } from './table-paginator.component';

declare module '@pebula/ngrid/lib/ext/types' {
  interface PblNgridPluginExtension {
    matPaginator?: PblNgridMatPaginatorDirective;
  }
}

const PLUGIN_KEY: 'matPaginator' = 'matPaginator';

@NgridPlugin({ id: PLUGIN_KEY })
@Directive({ selector: 'pbl-ngrid[matPaginator]' })
export class PblNgridMatPaginatorDirective implements OnDestroy, DoCheck {
  /**
   * Add's a selection column using material's `mat-checkbox` in the column specified.
   */
  @Input() get matPaginator(): boolean { return this._enabled; }
  set matPaginator(value: boolean ) {
    value = coerceBooleanProperty(value);
    if (value !== this._enabled) {
      this._enabled = value;
      if (!value) {
        if (this.cmpRef) {
          this.cmpRef.destroy();
          this.cmpRef = undefined;
        }
        this.ngDoCheck = PblNgridMatPaginatorDirective.prototype.ngDoCheck;

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';

declare module '@pebula/ngrid/lib/ext/types' {
  interface PblNgridPluginExtension {
    matSort?: PblNgridMatSortDirective;
  }
}
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) => void;

  constructor(public table: PblNgridComponent, private pluginCtrl: PblNgridPluginController, public sort: MatSort) {
    this._removePlugin = pluginCtrl.setPlugin(PLUGIN_KEY, this);

    let origin: 'ds' | 'click' = 'click';
    this.sort.sortChange
      .pipe(UnRx(this))
      .subscribe( s => {
        this.onSort(s, origin);
        origin = 'click';
      });

c.pin = state ? type : undefined;
      if (type === 'end') {
        c.columnDef.stickyEnd = state;
        c.columnDef.sticky = false;
      } else {
        c.columnDef.sticky = state;
        c.columnDef.stickyEnd = false;
      }
    }
  }
  if (changed) {
    grid._cdkTable.updateStickyColumnStyles();
  }
}

@NgridPlugin({ id: PLUGIN_KEY })
@Directive({ selector: 'pbl-ngrid[stickyColumnStart], pbl-ngrid[stickyColumnEnd], pbl-ngrid[stickyHeader], pbl-ngrid[stickyFooter]' })
export class PblNgridStickyPluginDirective implements OnDestroy {
  /**
   * Set the header rows you want to apply sticky positioning to.
   * Valid values are:
   *   - `grid` - Literal string `grid` that will set the grid's main header row.
   *   - number  - The index of the row, for multi-header row. The index refers to the order you defined the header/headerGroup rows (base 0);
   *
   * For performance considerations only new values will trigger a change (i.e. the array should be treated as immutable).
   * Manipulating the array will not trigger a change (the sticky state will not change) unless sending a copy of it (replacing it, e.g. Array.slice())
   */
  @Input() set stickyColumnStart(value: Array) {
    if (!this._startDiffer) {
      this._startDiffer = this._differs.find([]).create();
    }
    this.applyColumnDiff('start', value, this._startDiffer);

import { Directive, Input } from '@angular/core';
import { PblNgridPluginController, NgridPlugin } from '@pebula/ngrid';
import { PblNgridOverlayPanelFactory, PblNgridOverlayPanel, PblNgridOverlayPanelConfig } from '@pebula/ngrid/overlay-panel';

declare module '@pebula/ngrid/lib/ext/types' {
  interface PblNgridPluginExtension {
    matHeaderContextMenu?: PblNgridMatHeaderContextMenuPlugin;
  }
}

const PLUGIN_KEY: 'matHeaderContextMenu' = 'matHeaderContextMenu';

@Directive({ selector: 'pbl-ngrid[matHeaderContextMenu]' })
@NgridPlugin({ id: PLUGIN_KEY })
export class PblNgridMatHeaderContextMenuPlugin {

  @Input('matHeaderContextMenu') style: any;
  @Input() config: PblNgridOverlayPanelConfig;

  readonly overlayPanel: PblNgridOverlayPanel;

  constructor(overlayPanelFactory: PblNgridOverlayPanelFactory,
              public readonly pluginCtrl: PblNgridPluginController) {
    this.overlayPanel = overlayPanelFactory.create(pluginCtrl.extApi.grid);
  }

}

*
 * A **regular grid** (not transposed) represents rows horizontally:
 *
 * - Each horizontal row represents an item in the collection.
 * - Each vertical column represents the same property of all rows in the collection.
 *
 * A **transposed** grid represents row vertically:
 *
 * - Each horizontal row represents the same property of all rows in the collection.
 * - Each vertical row represents an item in the collection.
 *
 * > Note that transposing a grid might not play nice with other plugins and/or features.
 * For example, using pagination with transpose make no sense.
 */

@NgridPlugin({ id: PLUGIN_KEY })
@Directive({ selector: 'pbl-ngrid[transpose]' })
@UnRx()
export class PblNgridTransposePluginDirective implements OnDestroy {

  @Input() get transpose(): boolean { return this.enabled; };
  set transpose(value: boolean) {
    value = coerceBooleanProperty(value);
    if (value !== this.enabled) {
      const isFirst = this.enabled === undefined;
      this.enabled = value;
      if (!value) {
        this.disable(true);
      } else {
        this.enable(!isFirst);
      }
    }

state?: PblNgridStatePlugin;
  }
  interface PblNgridPluginExtensionFactories {
    state: keyof typeof PblNgridStatePlugin;
  }
}

interface InternalStatePluginEvents {
  phase: 'load' | 'save';
  position: 'before' | 'after';
  error?: Error;
}

export const PLUGIN_KEY: 'state' = 'state';

@NgridPlugin({ id: PLUGIN_KEY, factory: 'create', runOnce: registerBuiltInHandlers })
@UnRx()
export class PblNgridStatePlugin {

  loadOptions?: PblNgridStateLoadOptions;
  saveOptions?: PblNgridStateSaveOptions;

  afterLoadState: Observable;
  afterSaveState: Observable;
  onError: Observable<{ phase: 'save' | 'load'; error: Error; }>;

  private _removePlugin: (table: PblNgridComponent) => void;
  private _events = new Subject();

  constructor(public grid: PblNgridComponent, protected injector: Injector, protected pluginCtrl: PblNgridPluginController) {
    this._removePlugin = pluginCtrl.setPlugin(PLUGIN_KEY, this);

}

function findEventSource(source: Event): { type: 'row' | 'cell', target: HTMLElement } | undefined {
  const cellTarget = findParentCell(source.target as any);
  if (cellTarget) {
    return { type: 'cell', target: cellTarget };
  } else if (isRowContainer(source.target as any)) {
    return { type: 'cell', target: source.target as any };
  }
}

export function runOnce(): void {
  PblColumn.extendProperty('editable');
}

@NgridPlugin({ id: PLUGIN_KEY, factory: 'create', runOnce })
export class PblNgridTargetEventsPlugin {
  rowClick = new EventEmitter>();
  rowDblClick = new EventEmitter>();
  rowEnter = new EventEmitter>();
  rowLeave = new EventEmitter>();

  cellClick = new EventEmitter>();
  cellDblClick = new EventEmitter>();
  cellEnter = new EventEmitter>();
  cellLeave = new EventEmitter>();

  mouseDown = new EventEmitter | Events.PblNgridRowEvent>();
  mouseUp = new EventEmitter | Events.PblNgridRowEvent>();
  keyUp = new EventEmitter | Events.PblNgridRowEvent>();
  keyDown = new EventEmitter | Events.PblNgridRowEvent>();