fix(datagrid): hide separator from last column dynamically (backport …

…to 16.x) (#1591)

Backport b4a4935 from #1584. <br> ## PR
Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [X] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

Currently we have a CSS selector for `:last-child` to hide the separator
from the column but when the last column gets hidden that&#39;s
happening only visually and it&#39;s still in the DOM so that&#39;s not
working.

&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;

Issue Number: CDE-2317, #1501 

## What is the new behavior?

Update showSeparator states when hidden state changes.

## Does this PR introduce a breaking change?

- [ ] Yes
- [X] No

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information

Co-authored-by: Daniel Tsanev <127101685+dtsanevmw@users.noreply.github.com>

projects/angular/clarity.api.md

@@ -1294,7 +1294,7 @@ export class ClrDatagridCell implements OnInit {
 export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>> implements OnDestroy, OnInit, OnChanges {
     // Warning: (ae-forgotten-export) The symbol "Sort" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "FiltersProvider" needs to be exported by the entry point index.d.ts
-    constructor(_sort: Sort<T>, filters: FiltersProvider<T>, vcr: ViewContainerRef, detailService: DetailService, changeDetectorRef: ChangeDetectorRef);
+    constructor(el: ElementRef<HTMLElement>, _sort: Sort<T>, filters: FiltersProvider<T>, vcr: ViewContainerRef, detailService: DetailService, changeDetectorRef: ChangeDetectorRef);
     // (undocumented)
     get ariaSort(): "none" | "ascending" | "descending";
     // (undocumented)
@@ -1315,6 +1315,8 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     filterValueChange: EventEmitter<any>;
     // (undocumented)
+    get isHidden(): boolean;
+    // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -1323,7 +1325,8 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     set projectedFilter(custom: any);
     // (undocumented)
-    showSeparator: boolean;
+    get showSeparator(): boolean;
+    set showSeparator(value: boolean);
     sort(reverse?: boolean): void;
     get sortable(): boolean;
     // (undocumented)

projects/angular/src/data/datagrid/datagrid-column.ts

@@ -10,6 +10,7 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChild,
+  ElementRef,
   EventEmitter,
   Injector,
   Input,
@@ -36,6 +37,7 @@ import { CustomFilter } from './providers/custom-filter';
 import { DetailService } from './providers/detail.service';
 import { FiltersProvider } from './providers/filters';
 import { Sort } from './providers/sort';
+import { HIDDEN_COLUMN_CLASS } from './render/constants';
 import { DatagridFilterRegistrar } from './utils/datagrid-filter-registrar';
 import { WrappedColumn } from './wrapped-column';
 
@@ -101,8 +103,6 @@ export class ClrDatagridColumn<T = any>
   @Output('clrDgSortOrderChange') sortOrderChange = new EventEmitter<ClrDatagridSortOrder>();
   @Output('clrFilterValueChange') filterValueChange = new EventEmitter();
 
-  showSeparator = true;
-
   /**
    * A custom filter for this column that can be provided in the projected content
    */
@@ -145,7 +145,10 @@ export class ClrDatagridColumn<T = any>
    */
   private subscriptions: Subscription[] = [];
 
+  private _showSeparator = true;
+
   constructor(
+    private el: ElementRef<HTMLElement>,
     private _sort: Sort<T>,
     filters: FiltersProvider<T>,
     private vcr: ViewContainerRef,
@@ -157,6 +160,18 @@ export class ClrDatagridColumn<T = any>
     this.subscriptions.push(this.listenForDetailPaneChanges());
   }
 
+  get isHidden() {
+    return this.el.nativeElement.classList.contains(HIDDEN_COLUMN_CLASS);
+  }
+
+  get showSeparator() {
+    return this._showSeparator;
+  }
+  set showSeparator(value: boolean) {
+    this._showSeparator = value;
+    this.changeDetectorRef.markForCheck();
+  }
+
   // TODO: We might want to make this an enum in the future
   @Input('clrDgColType')
   get colType() {
@@ -355,8 +370,6 @@ export class ClrDatagridColumn<T = any>
     return this.detailService.stateChange.subscribe(state => {
       if (this.showSeparator !== !state) {
         this.showSeparator = !state;
-        // Have to manually change because of OnPush
-        this.changeDetectorRef.markForCheck();
       }
     });
   }

projects/angular/src/data/datagrid/render/main-renderer.ts

@@ -252,6 +252,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
                 row.cells.get(columnIndex).setHidden(state);
               }
             });
+            this.updateColumnSeparatorsVisibility();
             this.keyNavigation.resetKeyGrid();
             break;
           case DatagridColumnChanges.INITIALIZE:
@@ -294,4 +295,15 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
       return false;
     }
   }
+
+  private updateColumnSeparatorsVisibility() {
+    const visibleColumns = this.datagrid.columns.filter(column => !column.isHidden);
+    visibleColumns.forEach((column, index) => {
+      if (index === visibleColumns.length - 1) {
+        column.showSeparator = false;
+      } else if (!column.showSeparator) {
+        column.showSeparator = true;
+      }
+    });
+  }
 }