feat(datagrid): virtual scroll (backport to 16.x) (#1400)

Backport ec04af7 from #1324.
## 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?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [x] 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?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1749

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <[email protected]>

.storybook/helpers/elements.data.ts

@@ -5,11 +5,14 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+import { BehaviorSubject } from 'rxjs';
+
 export interface Element {
   name: string;
   symbol: string;
   number: number;
   electronegativity: number;
+  expanded?: boolean;
 }
 
 export const elements: Element[] = [
@@ -132,3 +135,5 @@ export const elements: Element[] = [
   { name: 'Zinc', symbol: 'Zn', number: 30, electronegativity: 1.65 },
   { name: 'Zirconium', symbol: 'Zr', number: 40, electronegativity: 1.33 },
 ];
+
+export const behaviorElements = new BehaviorSubject(elements);

.storybook/stories/datagrid/datagrid-virtualscroll-detail.stories.ts

@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { ClrConditionalModule, ClrDatagrid, ClrDatagridModule, commonStringsDefault } from '@clr/angular';
+import { action } from '@storybook/addon-actions';
+import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
+
+import { behaviorElements } from '../../helpers/elements.data';
+
+export default {
+  title: 'Datagrid/Virtual Scroll Details',
+  component: ClrDatagrid,
+  decorators: [
+    moduleMetadata({
+      imports: [ClrDatagridModule, ClrConditionalModule],
+    }),
+  ],
+  argTypes: {
+    // inputs
+    clrDgSelected: { control: { disable: true } },
+    clrDgSingleSelected: { control: { disable: true } },
+    // outputs
+    clrDgRefresh: { control: { disable: true } },
+    clrDgSelectedChange: { control: { disable: true } },
+    clrDgSingleSelectedChange: { control: { disable: true } },
+    clrRenderRangeChange: { control: { disable: true } },
+    clrDgActionOverflowOpenChange: { control: { disable: true } },
+    // methods
+    dataChanged: { control: { disable: true } },
+    resize: { control: { disable: true } },
+    // story helpers
+    behaviorElements: { control: { disable: true }, table: { disable: true } },
+    setExpanded: { control: { disable: true }, table: { disable: true } },
+  },
+  args: {
+    // inputs
+    clrDgActionOverflowOpen: false,
+    clrDgActionOverflowButtonLabel: commonStringsDefault.rowActions,
+    clrDetailExpandableAriaLabel: commonStringsDefault.detailExpandableAriaLabel,
+    clrDgLoading: false,
+    clrLoadingMoreItems: false,
+    clrDgPreserveSelection: false,
+    clrDgRowSelection: false,
+    clrDgSingleActionableAriaLabel: commonStringsDefault.singleActionableAriaLabel,
+    clrDgSingleSelectionAriaLabel: commonStringsDefault.singleSelectionAriaLabel,
+    // outputs
+    clrDgRefresh: action('clrDgRefresh'),
+    clrDgSelectedChange: action('clrDgSelectedChange'),
+    clrDgSingleSelectedChange: action('clrDgSingleSelectedChange'),
+    clrRenderRangeChange: action('clrRenderRangeChange'),
+    clrDgActionOverflowOpenChange: action('clrDgActionOverflowOpenChange'),
+    // story helpers
+    behaviorElements,
+    singleSelectable: false,
+    multiSelectable: false,
+    actionOverflow: false,
+    compact: false,
+    hidableColumns: false,
+    height: 480,
+    selectedRows: [],
+    setExpanded,
+  },
+};
+
+const DatagridDetailsTemplate: StoryFn = args => ({
+  template: `
+    <style>
+      .electronegativity-container {
+        background-color: #119cd4;
+        display: inline-block;
+      }
+      .electronegativity-text {
+        width: 3rem;
+        display: inline-block;
+      }
+    </style>
+    <clr-datagrid
+      *ngIf="{ elements: behaviorElements | async }; let data"
+      ${args.height ? '[style.height.px]="height"' : ''}
+      ${args.multiSelectable ? '[clrDgSelected]="[]"' : ''}
+      ${args.singleSelectable ? '[clrDgSingleSelected]="true"' : ''}
+      [ngClass]="{ 'datagrid-compact': compact }"
+      [clrDetailExpandableAriaLabel]="clrDetailExpandableAriaLabel"
+      [clrDgDisablePageFocus]="clrDgDisablePageFocus"
+      [clrDgLoading]="clrDgLoading"
+      [clrDgPreserveSelection]="clrDgPreserveSelection"
+      [clrDgRowSelection]="clrDgRowSelection"
+      [clrDgSingleActionableAriaLabel]="clrDgSingleActionableAriaLabel"
+      [clrDgSingleSelectionAriaLabel]="clrDgSingleSelectionAriaLabel"
+      (clrDgRefresh)="clrDgRefresh($event)"
+      (clrDgSingleSelectedChange)="clrDgSingleSelectedChange($event)"
+      [clrLoadingMoreItems]="clrLoadingMoreItems"
+    >
+      <clr-dg-column [style.width.px]="250">
+        <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Name</ng-container>
+      </clr-dg-column>
+      <clr-dg-column [style.width.px]="250">
+        <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Symbol</ng-container>
+      </clr-dg-column>
+      <clr-dg-column [style.width.px]="250">
+        <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Number</ng-container>
+      </clr-dg-column>
+      <clr-dg-column>
+        <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Electronegativity</ng-container>
+      </clr-dg-column>
+
+      <ng-template
+        *ngIf="data.elements"
+        ClrVirtualScroll
+        let-element
+        let-index="index"
+        [clrVirtualRowsOf]="data.elements"
+        [clrVirtualRowsTemplateCacheSize]="400"
+        (renderedRangeChange)="clrRenderRangeChange($event)"
+      >
+        <clr-dg-row [clrDgItem]="element" [clrDgSelected]="selectedRows.includes(index)">
+          <clr-dg-action-overflow
+            *ngIf="actionOverflow"
+            [clrDgActionOverflowOpen]="clrDgActionOverflowOpen && index === 0"
+            [clrDgActionOverflowButtonLabel]="clrDgActionOverflowButtonLabel"
+            (clrDgActionOverflowOpenChange)="index === 0 && clrDgActionOverflowOpenChange($event)"
+          >
+            <button class="action-item">Edit</button>
+            <button class="action-item">Delete</button>
+          </clr-dg-action-overflow>
+          <clr-dg-cell>{{ element.name }}</clr-dg-cell>
+          <clr-dg-cell>{{ element.symbol }}</clr-dg-cell>
+          <clr-dg-cell>{{ element.number }}</clr-dg-cell>
+          <clr-dg-cell>
+            <span class="electronegativity-text">{{ element.electronegativity }}</span>
+            <span [style.width.%]="(element.electronegativity * 100) / 5" class="electronegativity-container">
+              &nbsp;
+            </span>
+          </clr-dg-cell>
+        </clr-dg-row>
+      </ng-template>
+      <clr-dg-detail [ngClass]="{ highlight }" *clrIfDetail="let detail">
+        <clr-dg-detail-header>{{ detail.name }}</clr-dg-detail-header>
+        <clr-dg-detail-body [ngSwitch]="detailContentType">
+          <pre>{{ detail | json }}</pre>
+        </clr-dg-detail-body>
+      </clr-dg-detail>
+      <clr-dg-footer>{{ data.elements?.length }}</clr-dg-footer>
+    </clr-datagrid>
+    {{ details }}
+  `,
+  props: { ...args },
+});
+
+function setExpanded($event, element) {
+  element.expanded = $event;
+}
+
+export const Datagrid: StoryObj = {
+  render: DatagridDetailsTemplate,
+};
+
+export const Full: StoryObj = {
+  render: DatagridDetailsTemplate,
+  args: {
+    actionOverflow: true,
+    hidableColumns: true,
+    singleSelectable: true,
+  },
+};
+
+export const FullCompact: StoryObj = {
+  render: DatagridDetailsTemplate,
+  args: {
+    actionOverflow: true,
+    compact: true,
+    hidableColumns: true,
+    multiSelectable: true,
+  },
+};