List Component

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>;
+}

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

@@ -0,0 +1,5 @@
+<div [ngStyle]="columnLayout">
+  @for (column of columns; track column) {
+  <ng-container *ngComponentOutlet="columnComponent; inputs: { column, data, rowIndex: index }"></ng-container>
+  }
+</div>

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

@@ -0,0 +1,37 @@
+@use 'colors/colors' as colors;
+
+ngx-list-row {
+  &.ngx-list-row {
+    background-color: colors.$color-blue-grey-800;
+    border: 1px solid colors.$color-blue-grey-600;
+    border-radius: 0.25rem;
+    display: grid;
+    align-items: center;
+    height: 40px;
+    margin: 0.25rem 1rem;
+    padding-inline: 1rem;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: 3px;
+      position: absolute;
+      left: 0;
+      height: 100%;
+      border-top-left-radius: 0.25rem;
+      border-bottom-left-radius: 0.25rem;
+    }
+
+    &--error::before {
+      background-color: colors.$color-red-500;
+    }
+
+    &--success::before {
+      background-color: colors.$color-green-500;
+    }
+
+    &--warning::before {
+      background-color: colors.$color-orange-400;
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Component, Input, QueryList, ViewEncapsulation } from '@angular/core';
+import { ListColumnComponent } from '../list-column/list-column.component';
+import { ListRowStatus } from '../models/list-row-status.enum';
+
+@Component({
+  selector: 'ngx-list-row',
+  templateUrl: './list-row.component.html',
+  styleUrl: './list-row.component.scss',
+  standalone: false,
+  host: {
+    class: 'ngx-list-row',
+    '[class.ngx-list-row--error]': 'status === ListRowStatus.Error || data?.status === ListRowStatus.Error',
+    '[class.ngx-list-row--success]': 'status === ListRowStatus.Success || data?.status === ListRowStatus.Success',
+    '[class.ngx-list-row--warning]': 'status === ListRowStatus.Warning || data?.status === ListRowStatus.Warning'
+  },
+  encapsulation: ViewEncapsulation.None
+})
+export class ListRowComponent {
+  @Input() columnLayout: Partial<CSSStyleDeclaration>;
+  @Input() columns: QueryList<ListColumnComponent>;
+  @Input() data: Record<string, unknown>;
+  @Input() index: number;
+  @Input() status: ListRowStatus;
+
+  columnComponent = ListColumnComponent;
+
+  readonly ListRowStatus = ListRowStatus;
+}

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

@@ -0,0 +1,26 @@
+<div
+  [ngStyle]="_columnLayout"
+  class="ngx-list__headers-container"
+  [class.ngx-list__headers-container__scrollable]="hasScrollbar"
+>
+  @for (header of headers; track header) {
+  <ng-container *ngComponentOutlet="headerComponent; inputs: { header: header }"></ng-container>
+  }
+</div>
+<hr />
+<cdk-virtual-scroll-viewport
+  #virtualScrollViewport
+  [style.height.px]="height"
+  itemSize="40"
+  minBufferPx="200"
+  maxBufferPx="800"
+>
+  <div *cdkVirtualFor="let data of dataSource; index as i" class="ngx-list__virtual-scroll__item">
+    <ng-container
+      *ngComponentOutlet="
+        rowComponent;
+        inputs: { columnLayout: _columnLayout, columns, data, row, index: i, status: row.status }
+      "
+    ></ng-container>
+  </div>
+</cdk-virtual-scroll-viewport>

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

@@ -0,0 +1,27 @@
+@use 'colors/colors' as colors;
+
+ngx-list.ngx-list {
+  .ngx-list {
+    &__headers-container {
+      padding-inline: 1rem;
+      margin-inline: 1rem;
+
+      &__scrollable {
+        margin-right: 1.75rem; // Account for scrollbar to maintain column header alignment
+      }
+    }
+
+    &__virtual-scroll {
+      &__item {
+        height: 40px;
+      }
+    }
+  }
+
+  hr {
+    border-top: 1px solid colors.$color-blue-grey-600;
+    border-bottom: 1px solid colors.$color-blue-grey-600;
+    opacity: 0.75;
+    margin: 0.75rem 0 0.5rem 0;
+  }
+}

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

@@ -0,0 +1,125 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChild,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  QueryList,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { Subject, takeUntil } from 'rxjs';
+import { ListRowComponent } from './list-row/list-row.component';
+import { ListColumnComponent } from './list-column/list-column.component';
+import { ListHeaderComponent } from './list-header/list-header.component';
+import { ListPaginationConfig } from './models/list-pagination-config';
+@Component({
+  selector: 'ngx-list',
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.scss',
+  standalone: false,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'ngx-list'
+  }
+})
+export class ListComponent implements AfterContentInit, AfterViewInit, OnDestroy {
+  @Input() columnLayout: Partial<CSSStyleDeclaration>;
+  @Input() dataSource: Array<Record<string, unknown>> = [];
+  @Input() height: number = 500;
+  @Input() paginationConfig: ListPaginationConfig;
+
+  @Output() onPageChange = new EventEmitter<number>();
+  @Output() onScroll = new EventEmitter<number>();
+
+  @ContentChildren(ListColumnComponent) columns: QueryList<ListColumnComponent>;
+  @ContentChildren(ListHeaderComponent) headers: QueryList<ListHeaderComponent>;
+  @ContentChild(ListRowComponent) row: ListRowComponent;
+  @ViewChild('virtualScrollViewport') virtualScrollViewport: CdkVirtualScrollViewport;
+
+  headerComponent = ListHeaderComponent;
+  rowComponent = ListRowComponent;
+
+  page = 1;
+  hasScrollbar = false;
+  _columnLayout: Partial<CSSStyleDeclaration> = {
+    display: 'grid',
+    gap: '1rem'
+  };
+
+  minBufferPx: number;
+  maxBufferPx: number;
+
+  private destroy$ = new Subject<void>();
+
+  ngAfterContentInit(): void {
+    this.generateLayout();
+  }
+
+  ngAfterViewInit(): void {
+    this.minBufferPx = this.dataSource.length;
+
+    setTimeout(() => {
+      this.hasScrollbar =
+        this.virtualScrollViewport.elementRef.nativeElement.scrollHeight >
+        this.virtualScrollViewport.elementRef.nativeElement.clientHeight;
+
+      this.initScrollListener();
+
+      if (this.paginationConfig) {
+        const { index, pageSize } = this.paginationConfig;
+        if (index > 1 && pageSize > 0) {
+          this.page = index - 1;
+          const rowHeight = 40;
+          const scrollTo = rowHeight * (pageSize * (index - 1));
+          this.virtualScrollViewport.elementRef.nativeElement.scrollTo({ top: scrollTo });
+        }
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  generateLayout(): void {
+    if (!this.columnLayout || Object.keys(this.columnLayout).length === 0) {
+      this._columnLayout = {
+        ...this._columnLayout,
+        gridTemplateColumns: `repeat(${this.headers.length}, 1fr)`
+      };
+    } else {
+      this._columnLayout = {
+        ...this._columnLayout,
+        ...this.columnLayout
+      };
+    }
+  }
+
+  initScrollListener(): void {
+    this.virtualScrollViewport
+      .elementScrolled()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        const scrollY: number = (event.target as HTMLElement).scrollTop;
+        this.onScroll.emit(scrollY);
+
+        const pageSize = this.paginationConfig?.pageSize;
+        if (pageSize) {
+          const currentRow = Math.floor(scrollY / 40);
+          const page = Math.floor(currentRow / pageSize) + 1;
+
+          if (page !== this.page) {
+            this.page = page;
+            this.onPageChange.emit(this.page);
+          }
+        }
+      });
+  }
+}

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { ListComponent } from './list.component';
+import { ListRowComponent } from './list-row/list-row.component';
+import { ListColumnComponent } from './list-column/list-column.component';
+import { CommonModule } from '@angular/common';
+import { ListColumnTemplateDirective } from './list-column/list-column-template.directive';
+import { ListHeaderComponent } from './list-header/list-header.component';
+import { ListHeaderTemplateDirective } from './list-header/list-header-template.directive';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+@NgModule({
+  declarations: [
+    ListComponent,
+    ListRowComponent,
+    ListColumnComponent,
+    ListHeaderComponent,
+    ListHeaderTemplateDirective,
+    ListColumnTemplateDirective
+  ],
+  imports: [CommonModule, ScrollingModule],
+  exports: [
+    ListComponent,
+    ListRowComponent,
+    ListColumnComponent,
+    ListHeaderComponent,
+    ListHeaderTemplateDirective,
+    ListColumnTemplateDirective
+  ]
+})
+export class ListModule {}

projects/swimlane/ngx-ui/src/lib/components/list/models/list-pagination-config.ts

@@ -0,0 +1,4 @@
+export interface ListPaginationConfig {
+  index: number;
+  pageSize: number;
+}

projects/swimlane/ngx-ui/src/lib/components/list/models/list-row-status.enum.ts

@@ -0,0 +1,5 @@
+export enum ListRowStatus {
+  Error = 'error',
+  Success = 'success',
+  Warning = 'warning'
+}