@sumaris-net/ngx-components 18.10.29 → 18.12.0

package/src/app/core/table/column/actions-column.component.html

@@ -0,0 +1,219 @@
+<ng-container [matColumnDef]="matColumnDef" [stickyEnd]="stickyEnd">
+  @switch (style) {
+    <!-- mat-table style (e.g. used in sumaris activity calendar) -->
+    @case ('table') {
+      <!-- header cell -->
+      <th mat-header-cell *matHeaderCellDef [class]="classList" [class.mat-column-sticky]="stickyEnd">
+        <button
+          mat-icon-button
+          *ngIf="optionsClick.observed"
+          [title]="optionsTitle | translate"
+          (click)="optionsClick.emit($event)"
+        >
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <ng-content select="[matHeader]"></ng-content>
+      </th>
+
+      <!-- row cell -->
+      <td mat-cell *matCellDef="let row" [class]="classList">
+        <ng-container *ngTemplateOutlet="cellTemplateStart; context: { $implicit: row }"></ng-container>
+
+        @let editing = row.editing;
+        @let dirty = row.dirty;
+        @let valid = row.valid;
+        @let pending = row.pending;
+        @let invalid = !pending && !valid;
+        @if (editing) {
+          <!-- pending -->
+          @if (pending) {
+            <ion-spinner name="dots" class="center"></ion-spinner>
+          }
+
+          <!-- Confirm button -->
+          @if (canConfirm && dirty && valid) {
+            <button
+              mat-icon-button
+              color="light"
+              [title]="'COMMON.BTN_APPLY' | translate"
+              (click)="confirmEditCreateClick.emit({ event: $event, row: row })"
+            >
+              <mat-icon>checkmark</mat-icon>
+            </button>
+          }
+
+          <!-- new row -->
+          @if (row.id === -1) {
+            <!-- delete button -->
+            @if (canDelete && invalid) {
+              <button
+                mat-icon-button
+                color="light"
+                [title]="'COMMON.BTN_DELETE' | translate"
+                (click)="cancelOrDeleteClick.emit({ event: $event, row: row })"
+              >
+                <mat-icon>delete_outline</mat-icon>
+              </button>
+            }
+
+            <!-- add button -->
+            @if (!canForward && canConfirmAndAdd && valid) {
+              <button
+                mat-icon-button
+                color="light"
+                [title]="'COMMON.BTN_ADD' | translate"
+                (click)="confirmAndAddClick.emit({ event: $event, row: row })"
+              >
+                <mat-icon>add</mat-icon>
+              </button>
+            }
+
+            <!-- existing row -->
+          } @else if (canCancel && dirty) {
+            <!-- cancel button -->
+            <button
+              mat-icon-button
+              color="light"
+              [title]="'COMMON.BTN_UNDO' | translate"
+              (click)="cancelOrDeleteClick.emit({ event: $event, row: row })"
+            >
+              <mat-icon>undo</mat-icon>
+            </button>
+          }
+        } @else if (dirtyIcon && dirty) {
+          <!-- dirty icon -->
+          <ion-icon [name]="dirtyIcon" color="accent" class="dirty-icon" tabindex="-1"></ion-icon>
+        }
+
+        <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row }"></ng-container>
+
+        <!-- navigation buttons (invisible - focusable only) -->
+        @if (canForward && editing && valid) {
+          <!-- forward button -->
+          <button class="mat-row-action-button-navigation" (focus)="forward.emit({ event: $event, row: row })"></button>
+        } @else if (canBackward && !editing) {
+          <!-- backward button -->
+          <button
+            class="mat-row-action-button-navigation"
+            (focus)="backward.emit({ event: $event, row: row })"
+          ></button>
+        }
+      </td>
+
+      <td mat-footer-cell *matFooterCellDef>
+        <ng-content select="[matFooter]"></ng-content>
+      </td>
+    }
+
+    <!-- mat-table style (e.g. used in sumaris activity calendar) -->
+    @case ('mat-table') {
+      <mat-header-cell *matHeaderCellDef [class]="classList" [class.mat-column-sticky]="stickyEnd">
+        <button
+          mat-icon-button
+          *ngIf="optionsClick.observed"
+          [title]="optionsTitle | translate"
+          (click)="optionsClick.emit($event)"
+        >
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <ng-content select="[matHeader]"></ng-content>
+      </mat-header-cell>
+      <mat-cell *matCellDef="let row" [class]="classList">
+        <ng-container *ngTemplateOutlet="cellTemplateStart; context: { $implicit: row }"></ng-container>
+        @if (row.editing) {
+          <!-- pending -->
+          @if (row.validator?.pending) {
+            <ion-spinner name="dots" class="center"></ion-spinner>
+          }
+
+          <!-- Confirm button -->
+          @if (canConfirm && row.validator?.dirty && row.validator.valid) {
+            <button
+              mat-icon-button
+              color="light"
+              [title]="'COMMON.BTN_APPLY' | translate"
+              (click)="confirmEditCreateClick.emit({ event: $event, row: row })"
+            >
+              <mat-icon>checkmark</mat-icon>
+            </button>
+          }
+
+          <!-- new row -->
+          @if (row.id === -1) {
+            <!-- delete button -->
+            <button
+              mat-icon-button
+              color="light"
+              *ngIf="canDelete && row.validator?.invalid"
+              [title]="'COMMON.BTN_DELETE' | translate"
+              (click)="cancelOrDeleteClick.emit({ event: $event, row: row })"
+            >
+              <mat-icon>delete_outline</mat-icon>
+            </button>
+
+            <!-- add button -->
+            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {
+              <button
+                mat-icon-button
+                color="light"
+                [title]="'COMMON.BTN_ADD' | translate"
+                (click)="confirmAndAddClick.emit({ event: $event, row: row })"
+              >
+                <mat-icon>add</mat-icon>
+              </button>
+            }
+
+            <!-- next button (invisible - focusable only) -->
+            @if (canForward && row.validator?.valid) {
+              <button
+                class="mat-row-action-button-navigation"
+                (focus)="forward.emit({ event: $event, row: row })"
+              ></button>
+            }
+
+            <!-- existing row -->
+          } @else {
+            <!-- cancel button -->
+            @if (canCancel && row.validator?.dirty) {
+              <button
+                mat-icon-button
+                color="light"
+                [title]="'COMMON.BTN_UNDO' | translate"
+                (click)="cancelOrDeleteClick.emit({ event: $event, row: row })"
+              >
+                <mat-icon>undo</mat-icon>
+              </button>
+            }
+
+            <!-- next button (invisible - focusable only) -->
+            @if (canForward && row.validator?.valid) {
+              <button
+                class="mat-row-action-button-navigation"
+                (focus)="forward.emit({ event: $event, row: row })"
+              ></button>
+            }
+          }
+        } @else {
+          <!-- dirty icon -->
+          @if (dirtyIcon && row.validator?.dirty) {
+            <ion-icon [name]="dirtyIcon" color="accent" class="dirty-icon"></ion-icon>
+          }
+
+          <!-- backward button (invisible - focusable only) -->
+          @if (canBackward) {
+            <button
+              class="mat-row-action-button-navigation"
+              (focus)="backward.emit({ event: $event, row: row })"
+            ></button>
+          }
+        }
+
+        <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row }"></ng-container>
+      </mat-cell>
+
+      <mat-footer-cell *matFooterCellDef>
+        <ng-content select="[matFooter]"></ng-content>
+      </mat-footer-cell>
+    }
+  }
+</ng-container>

package/src/app/core/table/column/actions-column.component.scss

@@ -0,0 +1,17 @@
+.mat-column-actions {
+
+  .mat-row-action-button-navigation {
+    color: transparent;
+    position: relative;
+    top: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 0 !important;
+    height: 1px;
+
+    .mat-mdc-button-touch-target {
+      width: 0 !important;
+      height: 1px;
+    }
+  }
+}

package/src/app/core/table/column/actions-column.component.ts

@@ -0,0 +1,83 @@
+import {
+  booleanAttribute,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { AsyncTableElement, TableElement } from '@e-is/ngx-material-table';
+import { MatColumnDef, MatTable } from '@angular/material/table';
+import { MatMenuTrigger } from '@angular/material/menu';
+
+@Component({
+  selector: 'app-actions-column',
+  styleUrls: ['./actions-column.component.scss'],
+  templateUrl: './actions-column.component.html',
+})
+export class ActionsColumnComponent<T extends TableElement<any> | AsyncTableElement<any> = TableElement<any>> implements OnInit, OnDestroy {
+  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
+  @ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;
+
+  @Input() matColumnDef = 'actions';
+  @Input() style: 'table' | 'mat-table' = 'table';
+  @Input({ transform: booleanAttribute }) stickyEnd = false;
+  @Input({ transform: booleanAttribute }) canCancel: boolean;
+  @Input({ transform: booleanAttribute }) canConfirm: boolean;
+  @Input({ transform: booleanAttribute }) canDelete: boolean;
+  @Input({ transform: booleanAttribute }) canBackward: boolean;
+  @Input({ transform: booleanAttribute }) canForward: boolean;
+  @Input({ transform: booleanAttribute }) canConfirmAndAdd: boolean;
+  @Input() dirtyIcon: boolean | string;
+  @Input() optionsTitle = 'COMMON.BTN_OPTIONS';
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('class') classList: string;
+  @Input() cellTemplateStart: TemplateRef<{ $implicit: T }>;
+  @Input() cellTemplate: TemplateRef<{ $implicit: T }>;
+
+  @Output() optionsClick = new EventEmitter<Event>();
+  @Output() cancelOrDeleteClick = new EventEmitter<{ event: Event; row: T }>();
+  @Output() confirmEditCreateClick = new EventEmitter<{ event: Event; row: T }>();
+  @Output() confirmAndAddClick = new EventEmitter<{ event: Event; row: T }>();
+  @Output() backward = new EventEmitter<{ event: Event; row: T }>();
+  @Output() forward = new EventEmitter<{ event: Event; row: T }>();
+
+  constructor(
+    private table: MatTable<any>,
+    private cd: ChangeDetectorRef
+  ) {
+    // TODO auto configure using AppTable ? (need a forwardRef() in the table component
+    //@Optional() private appTable: AppTable<any>
+    if (!table) throw new Error(`[actions-column] this column component must be inside a MatTable component`);
+  }
+
+  ngOnInit(): void {
+    this.cd.detectChanges();
+    this.table.addColumnDef(this.columnDef);
+    this.canCancel = this.canCancel ?? this.cancelOrDeleteClick.observed;
+    this.canConfirm = this.canConfirm ?? this.confirmEditCreateClick.observed;
+    this.canDelete = this.canDelete ?? this.cancelOrDeleteClick.observed;
+    this.canConfirmAndAdd = this.canConfirmAndAdd ?? this.confirmAndAddClick.observed;
+    this.canBackward = this.canBackward ?? this.backward.observed;
+    this.canForward = this.canForward ?? this.forward.observed;
+    this.dirtyIcon = this.dirtyIcon === true ? 'star' : this.dirtyIcon === false ? null : (this.dirtyIcon ?? 'star');
+  }
+
+  ngOnDestroy() {
+    this.table.removeColumnDef(this.columnDef);
+    this.optionsClick.complete();
+    this.optionsClick.unsubscribe();
+    this.cancelOrDeleteClick.complete();
+    this.cancelOrDeleteClick.unsubscribe();
+    this.confirmAndAddClick.complete();
+    this.confirmAndAddClick.unsubscribe();
+    this.backward.complete();
+    this.backward.unsubscribe();
+    this.forward.complete();
+    this.forward.unsubscribe();
+  }
+}

package/src/app/core/table/column/nav-actions-column.component.html

@@ -0,0 +1,119 @@
+<ng-container [matColumnDef]="matColumnDef" [stickyEnd]="stickyEnd" [ngSwitch]="style">
+  <ng-container *ngSwitchCase="'table'">
+    <th mat-header-cell *matHeaderCellDef [class]="classList" [class.mat-column-sticky]="stickyEnd">
+      <button
+        mat-icon-button
+        *ngIf="optionsClick.observed"
+        [title]="optionsTitle | translate"
+        (click)="optionsClick.emit($event)"
+      >
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <ng-content select="[matHeader]"></ng-content>
+    </th>
+    <td mat-cell *matCellDef="let row" [class]="classList">
+      @if (row.editing) {
+        <!-- pending -->
+        @if (row.validator?.pending) {
+          <ion-spinner [class.cdk-visually-hidden]="!showPending" name="dots" class="center"></ion-spinner>
+        }
+
+        <!-- invalid new row -->
+        @if (row.id === -1 && row.validator?.invalid) {
+          <!-- delete button -->
+          <button
+            mat-icon-button
+            color="light"
+            [title]="'COMMON.BTN_DELETE' | translate"
+            (click)="cancelOrDelete($event, row)"
+          >
+            <mat-icon>delete_outline</mat-icon>
+          </button>
+
+          <!-- valid row or invalid existing row -->
+        } @else {
+          <!-- forward button (invisible - focusable only) -->
+          <button class="mat-row-action-button-navigation" (focus)="confirmAndForward($event, row)"></button>
+        }
+
+        <!-- NOT editing row -->
+      } @else {
+        <!-- dirty icon -->
+        @if (dirtyIcon && row.validator?.dirty) {
+          <ion-icon [name]="dirtyIcon" color="accent" class="dirty-icon" tabindex="-1"></ion-icon>
+        }
+
+        <!-- backward button (invisible - focusable only) -->
+        <button
+          mat-icon-button
+          class="mat-row-action-button-navigation"
+          (focus)="confirmAndBackward($event, row)"
+        ></button>
+      }
+
+      <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row }"></ng-container>
+    </td>
+
+    <td mat-footer-cell *matFooterCellDef>
+      <ng-content select="[matFooter]"></ng-content>
+    </td>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'mat-table'">
+    <mat-header-cell *matHeaderCellDef [class]="classList" [class.mat-column-sticky]="stickyEnd">
+      <button
+        mat-icon-button
+        *ngIf="optionsClick.observed"
+        [title]="optionsTitle | translate"
+        (click)="optionsClick.emit($event)"
+      >
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <ng-content select="[matHeader]"></ng-content>
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row" [class]="classList">
+      @if (row.editing) {
+        <!-- pending -->
+        @if (row.validator?.pending) {
+          <ion-spinner [class.cdk-visually-hidden]="!showPending" name="dots" class="center"></ion-spinner>
+        }
+
+        <!-- invalid new row -->
+        @if (row.id === -1 && row.validator?.invalid) {
+          <!-- delete button -->
+          <button
+            mat-icon-button
+            color="light"
+            [title]="'COMMON.BTN_DELETE' | translate"
+            (click)="cancelOrDelete($event, row)"
+          >
+            <mat-icon>delete_outline</mat-icon>
+          </button>
+        } @else {
+          <!-- forward button (invisible - focusable only) -->
+          <button class="mat-row-action-button-navigation" (focus)="confirmAndForward($event, row)"></button>
+        }
+
+        <!-- not editing row -->
+      } @else {
+        <!-- dirty icon -->
+        @if (dirtyIcon && row.validator?.dirty) {
+          <ion-icon [name]="dirtyIcon" color="accent" class="dirty-icon"></ion-icon>
+        }
+
+        <!-- backward button (invisible - focusable only) -->
+        <button
+          mat-icon-button
+          class="mat-row-action-button-navigation"
+          (focus)="confirmAndBackward($event, row)"
+        ></button>
+      }
+
+      <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row }"></ng-container>
+    </mat-cell>
+
+    <mat-footer-cell *matFooterCellDef>
+      <ng-content select="[matFooter]"></ng-content>
+    </mat-footer-cell>
+  </ng-container>
+</ng-container>

package/src/app/core/table/column/nav-actions-column.component.ts

@@ -0,0 +1,108 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { AsyncTableElement, TableElement } from '@e-is/ngx-material-table';
+import { MatColumnDef, MatTable } from '@angular/material/table';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { AppTable } from '../table.class';
+import { AppAsyncTable } from '../async-table.class';
+import { Subject, Subscription } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-nav-actions-column',
+  styleUrls: ['./actions-column.component.scss'],
+  templateUrl: './nav-actions-column.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavActionsColumnComponent<T extends TableElement<any> | AsyncTableElement<any> = TableElement<any>> implements OnInit, OnDestroy {
+  _subscription = new Subscription();
+  _forwardEventSubject = new Subject<{ event: Event; row: T }>();
+  _backwardEventSubject = new Subject<{ event: Event; row: T }>();
+
+  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
+  @ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;
+
+  @Input() appTable: AppTable<any> | AppAsyncTable<any>;
+  @Input() matColumnDef = 'actions';
+  @Input() style: 'table' | 'mat-table' = 'table';
+  @Input({ transform: booleanAttribute }) stickyEnd = false;
+  @Input({ transform: booleanAttribute }) showPending: boolean;
+  @Input() dirtyIcon: boolean | string;
+  @Input() optionsTitle = 'COMMON.BTN_OPTIONS';
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('class') classList: string;
+  @Input() cellTemplate: TemplateRef<{ $implicit: T }>;
+  @Input() throttleTime = 250;
+
+  @Output() optionsClick = new EventEmitter<Event>();
+
+  constructor(
+    private matTable: MatTable<any>,
+    private cd: ChangeDetectorRef,
+    @Optional() appTable: AppTable<any>,
+    @Optional() appAsyncTable: AppAsyncTable<any>
+  ) {
+    if (!matTable) throw new Error(`[actions-column] this column component must be inside a MatTable component`);
+    this.appTable = appTable ?? appAsyncTable;
+    this._subscription = new Subscription();
+  }
+
+  ngOnInit(): void {
+    // Default values
+    this.showPending = this.showPending ?? true;
+    this.dirtyIcon = this.dirtyIcon === true ? 'star' : this.dirtyIcon === false ? null : this.dirtyIcon ?? 'star';
+
+    this.cd.detectChanges();
+    this.matTable.addColumnDef(this.columnDef);
+
+    if (!this.appTable)
+      throw new Error(`[nav-actions-column] No AppTable or AppAsyncTable found. Please define a provider or set input '[appTable]'`);
+
+    this._subscription.add(
+      this._forwardEventSubject
+        .pipe(
+          throttleTime(this.throttleTime) // Avoid too many event, when leaving Tab key pressed
+        )
+        .subscribe(({ event, row }) => this.appTable.confirmAndForward(event, row as any))
+    );
+
+    this._subscription.add(
+      this._backwardEventSubject
+        .pipe(
+          throttleTime(this.throttleTime) // Avoid too many event, when leaving Back-Tab key pressed
+        )
+        .subscribe(({ event, row }) => this.appTable.confirmAndBackward(event, row as any))
+    );
+  }
+
+  ngOnDestroy() {
+    this.matTable.removeColumnDef(this.columnDef);
+    this.optionsClick.complete();
+    this.optionsClick.unsubscribe();
+    this._subscription.unsubscribe();
+  }
+
+  protected cancelOrDelete(event: Event, row: T) {
+    this.appTable.cancelOrDelete(event, row as any);
+  }
+
+  protected confirmAndForward(event: Event, row: T) {
+    this._forwardEventSubject.next({ event, row });
+  }
+
+  protected confirmAndBackward(event: Event, row: T) {
+    this._backwardEventSubject.next({ event, row });
+  }
+}

package/src/app/core/table/column/row-field.component.html

@@ -0,0 +1,43 @@
+<ng-container [matColumnDef]="name" [sticky]="sticky">
+  <th mat-header-cell *matHeaderCellDef cdkDrag [cdkDragDisabled]="sticky || !draggable" [resizable]="resizable">
+    <!-- if sortable, wrap the header with a mat-sort-header -->
+    @if (sortable) {
+      <span mat-sort-header>
+        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+      </span>
+    } @else {
+      <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+    }
+    <ng-template #headerTemplate>
+      <ion-label appAutoTitle>{{ headerI18n | translate }}</ion-label>
+      @if (required) {
+        <ion-label color="danger" [innerHTML]="'&nbsp;*'"></ion-label>
+      }
+    </ng-template>
+  </th>
+  <td mat-cell *matCellDef="let row">
+    @if (!readonly && row.editing) {
+      <app-form-field
+        [definition]="definition || definitionFn(row)"
+        [required]="required"
+        [readonly]="readonly"
+        [disabled]="disabled"
+        [formControl]="row.validator | formGetControl: name"
+        [placeholder]="placeholder"
+        [compact]="compact"
+        [floatLabel]="floatLabel"
+        [appearance]="appearance"
+        [tabindex]="tabindex"
+        [autofocus]="autofocus"
+        [clearable]="clearable"
+        [chipColor]="chipColor"
+        [class]="classList"
+        [debug]="debug"
+      ></app-form-field>
+    } @else {
+      <ion-label appAutoTitle>
+        {{ row.currentData | propertyGet: name | valueFormat: definition || definitionFn(row) }}
+      </ion-label>
+    }
+  </td>
+</ng-container>

package/src/app/core/table/column/row-field.component.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import { PredefinedColors } from '@ionic/core';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { AppFloatLabelType, FormFieldDefinition } from '../../../shared/form/field.model';
+import { MatColumnDef, MatTable } from '@angular/material/table';
+import { AsyncTableElement, TableElement } from '@e-is/ngx-material-table';
+
+@Component({
+  selector: 'app-row-field',
+  styleUrls: ['./row-field.component.scss'],
+  templateUrl: './row-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppRowField implements OnInit, OnDestroy {
+  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
+
+  @Input() name!: string;
+  @Input() definition: FormFieldDefinition;
+  @Input() definitionFn: (row: TableElement<any> | AsyncTableElement<any>) => FormFieldDefinition;
+  @Input() headerI18n: string;
+  @Input() sortable = false;
+  @Input() resizable = false;
+  @Input() required: boolean;
+  @Input() readonly = false;
+  @Input() sticky = false;
+  @Input() draggable = false;
+  @Input() disabled: boolean;
+  @Input() placeholder: string;
+  @Input() compact = false;
+  @Input() floatLabel: AppFloatLabelType = 'auto';
+  @Input() appearance: MatFormFieldAppearance;
+  @Input() tabindex: number;
+  @Input() autofocus: boolean;
+
+  @Input() clearable: boolean;
+  @Input() chipColor: ThemePalette | PredefinedColors = null;
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('class') classList: string;
+  @Input() debug = false;
+
+  protected logPrefix = '[row-field]';
+
+  constructor(
+    // protected translate: TranslateService,
+    protected cd: ChangeDetectorRef,
+    // protected injector: Injector,
+    public matTable: MatTable<any>
+  ) {
+    if (!matTable) {
+      throw new Error(`${this.logPrefix} this column component must be inside a MatTable`);
+    }
+  }
+
+  ngOnInit() {
+    this.cd.detectChanges();
+    this.matTable.addColumnDef(this.columnDef);
+  }
+
+  ngOnDestroy() {
+    this.matTable.removeColumnDef(this.columnDef);
+  }
+}