How to use @angular/cdk-experimental - 10 common examples

it('makes the first and last rows focusable but invisible', fakeAsync(() => {
          const rows = component.getRows();

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.FOCUSABLE);
          expect(component.hoverContentStateForRow(rows.length - 1))
              .toBe(HoverContentState.FOCUSABLE);
        }));
      });

it('shows and hides on-hover content only after a delay', fakeAsync(() => {
          const [row0, row1] = component.getRows();
          row0.dispatchEvent(new Event('mouseover', {bubbles: true}));
          row0.dispatchEvent(new Event('mousemove', {bubbles: true}));

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.FOCUSABLE);

          tick(20);
          row0.dispatchEvent(new Event('mousemove', {bubbles: true}));
          tick(20);

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.FOCUSABLE);

          tick(31);

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.ON);

          row1.dispatchEvent(new Event('mouseover', {bubbles: true}));
          row1.dispatchEvent(new Event('mousemove', {bubbles: true}));

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.OFF);

          tick(41);

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.FOCUSABLE);
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.ON);
        }));

fakeAsync(() => {
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.FOCUSABLE);

          component.openLens(2);
          tick(1);

          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.FOCUSABLE);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.FOCUSABLE);

          component.focusEditCell(4);
          tick(1);

          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.FOCUSABLE);
        }));
      });

hoverContentStateForRow(rowIndex = 0) {
    const openButton = this.getOpenButton(rowIndex);

    if (!openButton) {
      return HoverContentState.OFF;
    }
    return (openButton.parentNode as Element).classList.contains('mat-row-hover-content-visible') ?
        HoverContentState.ON : HoverContentState.FOCUSABLE;
  }

hoverContentStateForRow(rowIndex = 0) {
    const openButton = this.getOpenButton(rowIndex);

    if (!openButton) {
      return HoverContentState.OFF;
    }
    return (openButton.parentNode as Element).classList.contains('mat-row-hover-content-visible') ?
        HoverContentState.ON : HoverContentState.FOCUSABLE;
  }

tick(20);
          row0.dispatchEvent(new Event('mousemove', {bubbles: true}));
          tick(20);

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.FOCUSABLE);

          tick(31);

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.ON);

          row1.dispatchEvent(new Event('mouseover', {bubbles: true}));
          row1.dispatchEvent(new Event('mousemove', {bubbles: true}));

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.OFF);

          tick(41);

          expect(component.hoverContentStateForRow(0)).toBe(HoverContentState.FOCUSABLE);
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.ON);
        }));

expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.FOCUSABLE);

          component.focusEditCell(2);
          tick(1);

          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.FOCUSABLE);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.FOCUSABLE);

          component.focusEditCell(4);
          tick(1);

          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.FOCUSABLE);

          component.getEditCell(4).blur();
          tick(1);

          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.FOCUSABLE);
        }));

expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.FOCUSABLE);

          component.focusEditCell(2);
          tick(1);

          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.FOCUSABLE);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.FOCUSABLE);

          component.focusEditCell(4);
          tick(1);

          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.ON);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.FOCUSABLE);

          component.getEditCell(4).blur();
          tick(1);

          expect(component.hoverContentStateForRow(1)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(2)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(3)).toBe(HoverContentState.OFF);
          expect(component.hoverContentStateForRow(4)).toBe(HoverContentState.FOCUSABLE);
        }));

protected makeElementVisible(element: HTMLElement): void {
    _closest(this.elementRef.nativeElement!, _CELL_SELECTOR)!
        .classList.add(MAT_ROW_HOVER_CELL_CLASS);

    if (this.services.directionality.value === 'rtl') {
      element.classList.add(MAT_ROW_HOVER_RTL_CLASS);
    } else {
      element.classList.remove(MAT_ROW_HOVER_RTL_CLASS);
    }

    element.classList.remove(MAT_ROW_HOVER_ANIMATE_CLASS);
    this.services.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        element.classList.add(MAT_ROW_HOVER_ANIMATE_CLASS);
      });
    });
  }
}

defaultStrategy() {
        switch (type) {
          case 'auto':
            return new AutoSizeVirtualScrollStrategy(100, 200);
          case 'fixed':
            return new FixedSizeVirtualScrollStrategy(48, 100, 200);
          case 'none':
            return new NoVirtualScrollStrategy();
        }
      }
    });