New TypedMatCellDef for strongly typed *matCellDef #12186

It is a drop-in replacement for `MatCellDef` with the additional input
of `dataSource` that allows to strongly type the cell element.

Usage:

```html
<table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="name">
        <th *matHeaderCellDef mat-header-cell>Name</th>
        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
            {{ element.name }}
        </td>
    </ng-container>
</table>
```

Author: PowerKiKi

client/app/admin/comments/comment/comment.component.ts

@@ -1,14 +1,14 @@
-import {NaturalErrorMessagePipe} from '@ecodev/natural';
-import {Component, inject, OnInit} from '@angular/core';
 import {
     NaturalAbstractDetail,
     NaturalDetailHeaderComponent,
+    NaturalErrorMessagePipe,
     NaturalFixedButtonDetailComponent,
     NaturalLinkableTabDirective,
     NaturalSelectComponent,
     NaturalSeoResolveData,
     NaturalStampComponent,
 } from '@ecodev/natural';
+import {Component, inject, OnInit} from '@angular/core';
 import {PermissionsService} from '../../../shared/services/permissions.service';
 import {EventService} from '../../events/services/event.service';
 import {NewsService} from '../../newses/services/news.service';

client/app/admin/comments/comments/comments.component.html

@@ -28,7 +28,7 @@
 
                     <ng-container matColumnDef="description">
                         <th *matHeaderCellDef mat-header-cell>Commentaire</th>
-                        <td *matCellDef="let element" mat-cell>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
                             <div class="nat-horizontal nat-align">
                                 <natural-table-button
                                     matTooltip="Éditer"
@@ -41,7 +41,7 @@
 
                     <ng-container matColumnDef="event">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header="event">Événement</th>
-                        <td *matCellDef="let element" mat-cell>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
                             @if (element.event) {
                                 <div class="nat-horizontal nat-align">
                                     <natural-table-button
@@ -56,7 +56,7 @@
 
                     <ng-container matColumnDef="news">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header="news">Actualité</th>
-                        <td *matCellDef="let element" mat-cell>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
                             @if (element.news) {
                                 <div class="nat-horizontal nat-align">
                                     <natural-table-button

client/app/admin/comments/comments/comments.component.ts

@@ -5,6 +5,7 @@ import {
     NaturalColumnsPickerComponent,
     NaturalSearchComponent,
     NaturalTableButtonComponent,
+    TypedMatCellDef,
 } from '@ecodev/natural';
 import {PermissionsService} from '../../../shared/services/permissions.service';
 import {CommentService} from '../services/comment.service';
@@ -14,7 +15,6 @@ import {MatTooltip} from '@angular/material/tooltip';
 import {MatSort, MatSortHeader} from '@angular/material/sort';
 import {
     MatCell,
-    MatCellDef,
     MatColumnDef,
     MatHeaderCell,
     MatHeaderCellDef,
@@ -34,7 +34,7 @@ import {
         MatHeaderCellDef,
         MatHeaderRowDef,
         MatColumnDef,
-        MatCellDef,
+        TypedMatCellDef,
         MatRowDef,
         MatHeaderCell,
         MatCell,

client/app/admin/comments/services/comment.service.ts

@@ -1,11 +1,11 @@
 import {Injectable} from '@angular/core';
 import {NaturalAbstractModelService} from '@ecodev/natural';
 import {
-    CommentQuery,
     CommentInput,
+    CommentQuery,
+    CommentQueryVariables,
     CommentsQuery,
     CommentsQueryVariables,
-    CommentQueryVariables,
     CreateComment,
     CreateCommentVariables,
     DeleteComments,

client/app/admin/events/event/event.component.ts

@@ -1,15 +1,15 @@
-import {NaturalErrorMessagePipe} from '@ecodev/natural';
-import {Component, inject, OnInit} from '@angular/core';
-import {RouterLink} from '@angular/router';
 import {
     NaturalAbstractDetail,
     NaturalDetailHeaderComponent,
+    NaturalErrorMessagePipe,
     NaturalFixedButtonDetailComponent,
     NaturalIconDirective,
     NaturalLinkableTabDirective,
     NaturalSeoResolveData,
     NaturalStampComponent,
 } from '@ecodev/natural';
+import {Component, inject, OnInit} from '@angular/core';
+import {RouterLink} from '@angular/router';
 import {PermissionsService} from '../../../shared/services/permissions.service';
 import {EventService} from '../services/event.service';
 import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';

client/app/admin/events/events/events.component.html

@@ -27,12 +27,14 @@
 
                     <ng-container matColumnDef="date">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header>Date</th>
-                        <td *matCellDef="let element" mat-cell>{{ element.date | date: 'dd.MM.y' }}</td>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
+                            {{ element.date | date: 'dd.MM.y' }}
+                        </td>
                     </ng-container>
 
                     <ng-container matColumnDef="name">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header="name">Nom</th>
-                        <td *matCellDef="let element" mat-cell>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
                             <div class="nat-horizontal nat-align">
                                 <natural-table-button
                                     matTooltip="Éditer"
@@ -45,12 +47,12 @@
 
                     <ng-container matColumnDef="place">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header="place">Lieu</th>
-                        <td *matCellDef="let element" mat-cell>{{ element.place }}</td>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>{{ element.place }}</td>
                     </ng-container>
 
                     <ng-container matColumnDef="type">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header="type">Type</th>
-                        <td *matCellDef="let element" mat-cell>{{ element.type }}</td>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>{{ element.type }}</td>
                     </ng-container>
                 </table>
             </div>

client/app/admin/events/events/events.component.ts

@@ -6,6 +6,7 @@ import {
     NaturalFixedButtonComponent,
     NaturalSearchComponent,
     NaturalTableButtonComponent,
+    TypedMatCellDef,
 } from '@ecodev/natural';
 import {PermissionsService} from '../../../shared/services/permissions.service';
 import {EventService} from '../services/event.service';
@@ -16,7 +17,6 @@ import {MatTooltip} from '@angular/material/tooltip';
 import {MatSort, MatSortHeader} from '@angular/material/sort';
 import {
     MatCell,
-    MatCellDef,
     MatColumnDef,
     MatHeaderCell,
     MatHeaderCellDef,
@@ -39,7 +39,7 @@ import {AsyncPipe, DatePipe} from '@angular/common';
         MatHeaderCellDef,
         MatHeaderRowDef,
         MatColumnDef,
-        MatCellDef,
+        TypedMatCellDef,
         MatRowDef,
         MatHeaderCell,
         MatCell,

client/app/admin/events/services/event.service.ts

@@ -5,11 +5,11 @@ import {
     CreateEventVariables,
     DeleteEvents,
     DeleteEventsVariables,
-    EventQuery,
     EventInput,
+    EventQuery,
+    EventQueryVariables,
     EventsQuery,
     EventsQueryVariables,
-    EventQueryVariables,
     UpdateEvent,
     UpdateEventVariables,
 } from '../../../shared/generated-types';

client/app/admin/facilitator-documents/facilitator-document/facilitator-document.component.ts

@@ -1,15 +1,15 @@
-import {NaturalErrorMessagePipe} from '@ecodev/natural';
-import {Component, inject} from '@angular/core';
 import {
     NaturalAbstractDetail,
     NaturalDetailHeaderComponent,
+    NaturalErrorMessagePipe,
     NaturalFileComponent,
     NaturalFixedButtonDetailComponent,
     NaturalIconDirective,
     NaturalLinkableTabDirective,
     NaturalSeoResolveData,
     NaturalStampComponent,
 } from '@ecodev/natural';
+import {Component, inject} from '@angular/core';
 import {FilesService} from '../../files/services/files.service';
 import {FacilitatorDocumentsService} from '../services/facilitator-documents.service';
 import {CreateFile} from '../../../shared/generated-types';

client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.html

@@ -22,10 +22,9 @@
 
                     <ng-container matColumnDef="name">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header>Nom</th>
-                        <td *matCellDef="let element" mat-cell>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
                             <natural-table-button
                                 matTooltip="Éditer"
-                                [class]="!element.isActive ? 'inactive' : ''"
                                 [label]="element.name"
                                 [navigate]="['/admin/facilitator-document', element.id]"
                             />
@@ -34,14 +33,14 @@
 
                     <ng-container matColumnDef="category">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header>Rubrique</th>
-                        <td *matCellDef="let element" mat-cell>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
                             {{ element.category }}
                         </td>
                     </ng-container>
 
                     <ng-container matColumnDef="file">
                         <th *matHeaderCellDef mat-header-cell mat-sort-header>Télécharger</th>
-                        <td *matCellDef="let element" mat-cell>
+                        <td *matCellDef="let element; dataSource: dataSource" mat-cell>
                             @if (element.file) {
                                 <a target="_blank" [href]="`/api/file/${element.file.id}`">
                                     <mat-icon naturalIcon="download" />