@sumaris-net/ngx-components 18.12.0 → 18.12.1

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

@@ -1,219 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-.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

@@ -1,83 +0,0 @@
-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

@@ -1,119 +0,0 @@
-<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

@@ -1,108 +0,0 @@
-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

@@ -1,43 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-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);
-  }
-}