fix(comparison-table): update cell clipping if mayStick property of h…

…eader row changes (#451)

* fix(comparison-table): update cell clipping if mayStick property of header row changes

* chore: fix formatting issues

* chore: apply review suggestion

* chore: make husky hooks executable

Co-authored-by: Igor Milly <[email protected]>

projects/ng-aquila/src/comparison-table/comparison-table-row.directive.spec.ts

@@ -84,6 +84,20 @@ describe('NxComparisonTableRowDirective', () => {
 
             expect(rowInstances.toArray()[0].mayStick).toBe(false);
         });
+
+        it('should request a cell clipping update on changes to mayStick', () => {
+            createTestComponent(NonStickyHeaderComponent);
+            let emitCount = 0;
+            rowInstances.toArray()[0]._requestCellClippingUpdate$.subscribe(() => emitCount++);
+
+            (testInstance as NonStickyHeaderComponent).mayStick = true;
+            fixture.detectChanges();
+            expect(emitCount).toBe(1);
+
+            (testInstance as NonStickyHeaderComponent).mayStick = false;
+            fixture.detectChanges();
+            expect(emitCount).toBe(2);
+        });
     });
 });
 
@@ -127,7 +141,7 @@ class DynamicTypeComponent extends RowTest {}
 @Component({
     template: `
         <nx-comparison-table>
-            <ng-container nxComparisonTableRow type="header" [mayStick]="false">
+            <ng-container nxComparisonTableRow type="header" [mayStick]="mayStick">
                 <nx-comparison-table-cell type="header">This is a header cell</nx-comparison-table-cell>
                 <nx-comparison-table-cell type="header">This is a header cell</nx-comparison-table-cell>
             </ng-container>
@@ -138,4 +152,6 @@ class DynamicTypeComponent extends RowTest {}
         </nx-comparison-table>
     `,
 })
-class NonStickyHeaderComponent extends RowTest {}
+class NonStickyHeaderComponent extends RowTest {
+    mayStick = false;
+}

projects/ng-aquila/src/comparison-table/comparison-table-row.directive.ts

@@ -34,6 +34,7 @@ export class NxComparisonTableRowDirective extends NxComparisonTableRowBase impl
 
     private _type: NxComparisonTableRowType = 'content';
     private _mayStick: boolean = true;
+    public _requestCellClippingUpdate$ = new Subject<void>();
 
     private _destroyed = new Subject();
 
@@ -52,6 +53,7 @@ export class NxComparisonTableRowDirective extends NxComparisonTableRowBase impl
     set mayStick(newValue: boolean) {
         if (newValue !== this._mayStick) {
             this._mayStick = coerceBooleanProperty(newValue);
+            this._requestCellClippingUpdate$.next(undefined);
         }
     }
     get mayStick(): boolean {

projects/ng-aquila/src/comparison-table/comparison-table.component.spec.ts

@@ -566,6 +566,26 @@ describe('NxComparisonTableComponent', () => {
             expect(parseInt(regex.exec(tableBody.styles['clip-path'] as string)![1], 10)).toBeLessThanOrEqual(0);
         }));
 
+        it('should update clipping-path when header row requests it', fakeAsync(() => {
+            createTestComponent(LongPageWithTableComponent);
+            tick(THROTTLE_TIME);
+
+            const wrapperDiv = fixture.debugElement.query(By.css('div'));
+            wrapperDiv.nativeElement.scrollTop = 50;
+            tableInstance._getHeaderRow()._requestCellClippingUpdate$.next(undefined);
+            tick();
+            fixture.detectChanges();
+            const tableBody = fixture.debugElement.query(By.css('.nx-comparison-table__table-body'));
+            const regex = /^inset\((.*)px -12px -1px\)$/;
+            expect(parseInt(regex.exec(tableBody.styles['clip-path'] as string)![1], 10)).toBeGreaterThan(0);
+
+            wrapperDiv.nativeElement.scrollTop = 0;
+            tableInstance._getHeaderRow()._requestCellClippingUpdate$.next(undefined);
+            tick();
+            fixture.detectChanges();
+            expect(parseInt(regex.exec(tableBody.styles['clip-path'] as string)![1], 10)).toBeLessThanOrEqual(0);
+        }));
+
         afterEach(() => {
             viewport.reset();
         });

projects/ng-aquila/src/comparison-table/comparison-table.component.ts

@@ -10,12 +10,14 @@ import {
     Input,
     OnDestroy,
     OnInit,
+    AfterViewInit,
     Optional,
     Output,
     QueryList,
     ViewChild,
 } from '@angular/core';
 import { NxViewportService } from '@aposin/ng-aquila/utils';
+import { delay, takeUntil } from 'rxjs/operators';
 
 import { NxComparisonTableCell } from './cell/cell.component';
 import { NxComparisonTableBase } from './comparison-table-base';
@@ -34,7 +36,7 @@ import { NxToggleSectionDirective } from './toggle-section/toggle-section.direct
     animations: [NxToggleSectionAnimations.bodyExpansion],
     providers: [{ provide: NxComparisonTableBase, useExisting: NxComparisonTableComponent }],
 })
-export class NxComparisonTableComponent extends NxComparisonTableBase implements OnInit, OnDestroy {
+export class NxComparisonTableComponent extends NxComparisonTableBase implements OnInit, AfterViewInit, OnDestroy {
     // Attention: this contains all rows and toggle sections, AND all rows contained in a toggle section!
     /** @docs-private */
     @ContentChildren(NxTableContentElement, { descendants: true }) elements!: QueryList<NxTableContentElement>;
@@ -103,8 +105,16 @@ export class NxComparisonTableComponent extends NxComparisonTableBase implements
         setTimeout(() => this._updateCellClipping());
     }
 
+    ngAfterViewInit() {
+        this._getHeaderRow()
+            ?._requestCellClippingUpdate$.pipe(delay(0), takeUntil(this._destroyed))
+            .subscribe(() => this._updateCellClipping());
+    }
+
     ngOnDestroy() {
         window.removeEventListener('scroll', this._scrollHandler, true);
+        this._destroyed.next();
+        this._destroyed.complete();
     }
 
     private _scrollHandler = (event: Event): void => {