List Component (#1086)

* initial UI work completed

* added new list components and directives to public api

* api docs added, API for list component finalized

* Examples page is almost complete

* completed unit tests

* updated loop track function

* updated examples page to separate logs for virtual and non-virtual scroll examples.

* added cypress tests for the list component, updated the changelog and fixed a couple data mismatches on the examples page for the list component

* removed unnecessary scss file from list page component

* Added the virtualScroll input to the API documentation

* fixed grammar mistake in cypress test declaration

Author: MarkColeman1

cypress/e2e/components/list.cy.ts

@@ -0,0 +1,27 @@
+describe('List', () => {
+  before(() => {
+    cy.visit('/list');
+    cy.get('.page-loader').should('not.exist', { timeout: 20000 });
+  });
+
+  describe('List', () => {
+    it('displays the correct number of headers, columns and rows', () => {
+      cy.get('ngx-list').first().as('CUT');
+      cy.get('@CUT').find('ngx-list-header').should('have.length', 3);
+      cy.get('@CUT').find('ngx-list-row').should('have.length', 10);
+      cy.get('@CUT').find('ngx-list-column').should('have.length', 30);
+    });
+
+    it('displays a custom column layout', () => {
+      cy.get('ngx-list').eq(1).as('CUT');
+      const expectedStyle = 'display: grid; gap: 1rem; grid-template-columns: 3fr 2fr 1fr;';
+      cy.get('@CUT').find('div.ngx-list__headers-container').should('have.attr', 'style', expectedStyle);
+      cy.get('@CUT').find('ngx-list-row').first().find('> div').should('have.attr', 'style', expectedStyle);
+    });
+
+    it('displays the row number using the row index', () => {
+      cy.get('ngx-list').eq(2).as('CUT');
+      cy.get('@CUT').find('ngx-list-column').first().should('contain.text', '1.');
+    });
+  });
+});

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## HEAD (unreleased)
 
+- Feature (`ngx-list`): Added a new list component
+
 ## 49.0.1 (2025-02-19)
 
 - Fix: Removing the `indeterminate state value validation` in the 'checked' input of the checkbox component
@@ -49,8 +51,8 @@ Breaking (`ngx-time`): There could be a potential breaking change due to how `ng
 
 ## 48.0.4 (2024-09-18)
 
-- Enhancement (`ngx-toggle`): Added `timeStamp` when emiting `change`
-- Enhancement (`ngx-checkbox`): Added `timeStamp` when emiting `change`
+- Enhancement (`ngx-toggle`): Added `timeStamp` when emitting `change`
+- Enhancement (`ngx-checkbox`): Added `timeStamp` when emitting `change`
 
 ## 48.0.3 (2024-09-17)
 

projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column-template.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[ngx-list-column-template]',
+  standalone: false
+})
+export class ListColumnTemplateDirective {}

projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column.component.html

@@ -0,0 +1,7 @@
+<ng-container [ngTemplateOutlet]="template"></ng-container>
+
+<ng-template #template>
+  @if (column) {
+  <ng-container *ngTemplateOutlet="column.columnTemplate; context: { row: data, rowIndex }"></ng-container>
+  }
+</ng-template>

projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column.component.scss

@@ -0,0 +1,10 @@
+@use 'colors/colors' as colors;
+
+ngx-list-column.ngx-list-column {
+  color: colors.$color-blue-grey-050;
+  font-size: 1rem;
+  line-height: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column.component.ts

@@ -0,0 +1,28 @@
+import { Component, ContentChild, Input, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ListColumnTemplateDirective } from './list-column-template.directive';
+
+export interface ListColumnInput {
+  columnTemplate: TemplateRef<any>;
+  template: TemplateRef<any>;
+}
+
+@Component({
+  selector: 'ngx-list-column',
+  templateUrl: './list-column.component.html',
+  styleUrl: './list-column.component.scss',
+  standalone: false,
+  host: {
+    class: 'ngx-list-column'
+  },
+  encapsulation: ViewEncapsulation.None
+})
+export class ListColumnComponent {
+  @ViewChild('template', { static: true }) template: TemplateRef<any>;
+
+  @Input() column: ListColumnInput;
+  @Input() data: Record<string, unknown>;
+  @Input() rowIndex: number;
+
+  @ContentChild(ListColumnTemplateDirective, { read: TemplateRef, static: true })
+  columnTemplate: TemplateRef<ListColumnTemplateDirective>;
+}

projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header-template.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[ngx-list-header-template]',
+  standalone: false
+})
+export class ListHeaderTemplateDirective {}

projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header.component.html

@@ -0,0 +1,7 @@
+<ng-container [ngTemplateOutlet]="template"></ng-container>
+
+<ng-template #template>
+  @if (header) {
+  <ng-container [ngTemplateOutlet]="header.headerTemplate"></ng-container>
+  }
+</ng-template>

projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header.component.scss

@@ -0,0 +1,6 @@
+ngx-list-header.ngx-list-header {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+}

projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header.component.ts

@@ -0,0 +1,21 @@
+import { Component, ContentChild, Input, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ListHeaderTemplateDirective } from './list-header-template.directive';
+
+@Component({
+  selector: 'ngx-list-header',
+  templateUrl: './list-header.component.html',
+  styleUrl: './list-header.component.scss',
+  standalone: false,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'ngx-list-header'
+  }
+})
+export class ListHeaderComponent {
+  @ViewChild('template', { static: true }) template: TemplateRef<any>;
+
+  @Input() header: any;
+
+  @ContentChild(ListHeaderTemplateDirective, { read: TemplateRef, static: true })
+  headerTemplate: TemplateRef<ListHeaderTemplateDirective>;
+}