feat: table supports the use of attributes

src/table/index.ts

@@ -1,3 +1,8 @@
+export * from './new/table.component';
+export * from './new/table-cell.directive';
+export * from './new/table-header-cell.directive';
+export * from './new/table-header-row.component';
+export * from './new/table-row.component';
 export * from './table.component';
 export * from './table.module';
 export * from './table-cell.component';

src/table/new/table-cell.directive.ts

@@ -0,0 +1,27 @@
+import { CdkCell, CdkColumnDef } from '@angular/cdk/table';
+import { Directive, ElementRef, Input } from '@angular/core';
+
+import { buildBem } from '../../utils';
+
+const bem = buildBem('aui-table');
+
+/** Cell template container that adds the right classes and role. */
+@Directive({
+  selector: '[auiTableCell]',
+  host: {
+    class: 'aui-table__cell',
+    role: 'gridcell',
+    '[class.aui-table__cell--column]': 'direction === "column"',
+  },
+})
+export class NewTableCellDirective extends CdkCell {
+  @Input()
+  direction: 'row' | 'column' = 'row';
+
+  constructor(columnDef: CdkColumnDef, elementRef: ElementRef<HTMLElement>) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(
+      bem.element(`column-${columnDef.cssClassFriendlyName}`),
+    );
+  }
+}

src/table/new/table-header-cell.directive.ts

@@ -0,0 +1,23 @@
+import { CdkColumnDef, CdkHeaderCell } from '@angular/cdk/table';
+import { Directive, ElementRef } from '@angular/core';
+
+import { buildBem } from '../../utils';
+
+const bem = buildBem('aui-table');
+
+/** Header cell template container that adds the right classes and role. */
+@Directive({
+  selector: '[auiTableHeaderCell]',
+  host: {
+    class: 'aui-table__header-cell',
+    role: 'columnheader',
+  },
+})
+export class NewTableHeaderCellDirective extends CdkHeaderCell {
+  constructor(columnDef: CdkColumnDef, elementRef: ElementRef<HTMLElement>) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(
+      bem.element(`column-${columnDef.cssClassFriendlyName}`),
+    );
+  }
+}

src/table/new/table-header-row.component.ts

@@ -0,0 +1,22 @@
+import { CDK_ROW_TEMPLATE, CdkHeaderRow } from '@angular/cdk/table';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/** Header template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'tr[auiTableHeaderRow]',
+  template: CDK_ROW_TEMPLATE,
+  host: {
+    class: 'aui-table__header-row',
+    role: 'row',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'auiTableHeaderRow',
+  preserveWhitespaces: false,
+})
+export class NewTableHeaderRowComponent extends CdkHeaderRow {}

src/table/new/table-row.component.ts

@@ -0,0 +1,44 @@
+import { CDK_ROW_TEMPLATE, CdkRow } from '@angular/cdk/table';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/** Data row template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'tr[auiTableRow]',
+  template: CDK_ROW_TEMPLATE,
+  host: {
+    class: 'aui-table__row',
+    role: 'row',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'auiTableRow',
+  preserveWhitespaces: false,
+})
+export class NewTableRowComponent extends CdkRow implements AfterContentInit {
+  @Input()
+  @HostBinding('class.isDisabled')
+  disabled = false;
+
+  @HostBinding('class.hasPanel')
+  hasPanel = false;
+
+  constructor(private readonly elRef: ElementRef<HTMLElement>) {
+    super();
+  }
+
+  ngAfterContentInit() {
+    const panel = this.elRef.nativeElement.querySelector(
+      '[auiTableCell][auiExpandPanel]',
+    );
+    this.hasPanel = !!panel;
+  }
+}

src/table/new/table-scroll.scss

@@ -0,0 +1,230 @@
+@import '../../theme/var';
+@import '../../theme/mixin';
+
+$stickyCssClass: 'aui-table-sticky';
+
+// stylelint-disable plugin/no-low-performance-animation-properties
+
+// style for column shadow
+.aui-table__scroll-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow: hidden;
+  background-color: use-rgb(n-9);
+  padding: 0 $table-padding $table-padding;
+  border-radius: use-var(border-radius-l);
+  @include scroll-bar;
+
+  .aui-table {
+    padding: 0;
+    border-radius: 0;
+  }
+
+  .aui-table__scroll-shadow {
+    &.hasTableTopShadow:before,
+    &.hasTableBottomShadow:after {
+      transform: none;
+      width: 100%;
+      left: 0;
+    }
+  }
+}
+
+// style for vertical shadow
+.aui-table__scroll-shadow {
+  &.aui-table {
+    overflow: auto;
+    @include scroll-bar;
+  }
+
+  &.hasTableTopShadow:before {
+    content: '';
+    position: sticky;
+    display: block;
+    height: 16px;
+    margin: -16px -12px 0;
+    z-index: 99;
+    top: 28px;
+    @include theme-light {
+      box-shadow: 0 10px 10px -4px use-rgba(n-1, 0.16);
+    }
+    @include theme-dark {
+      box-shadow: 0 10px 10px -4px use-rgba(n-9, 0.75);
+    }
+  }
+
+  &.hasTableBottomShadow:after {
+    content: '';
+    position: sticky;
+    display: block;
+    height: 16px;
+    transform: translate3d(0, 12px, 0);
+    z-index: 99;
+    bottom: 0;
+    margin: -16px -12px 0;
+    @include theme-light {
+      box-shadow: 0 -10px 10px -4px use-rgba(n-1, 0.16) inset;
+    }
+    @include theme-dark {
+      box-shadow: 0 -10px 10px -4px use-rgba(n-9, 0.75) inset;
+    }
+  }
+
+  .aui-table__header-row {
+    margin: 0;
+    padding: 0;
+    align-items: stretch;
+
+    .aui-table__header-cell {
+      &:first-of-type {
+        padding-left: $table-cell-padding-h * 2;
+      }
+
+      &:last-of-type {
+        padding-right: $table-cell-padding-h * 2;
+      }
+    }
+
+    + .aui-table__row {
+      .aui-table__cell {
+        &:first-of-type {
+          border-top-left-radius: use-var(border-radius-l);
+        }
+
+        &:last-of-type {
+          border-top-right-radius: use-var(border-radius-l);
+        }
+      }
+    }
+  }
+
+  .aui-table__row {
+    border: none;
+    padding: 0;
+    align-items: stretch;
+    min-height: $table-row-min-height + 1;
+
+    .aui-table__cell {
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: use-rgb(n-8);
+
+      &:first-of-type {
+        border-left-width: 1px;
+        padding-left: $table-cell-padding-h * 2 - 1;
+      }
+
+      &:last-of-type {
+        border-right-width: 1px;
+        padding-right: $table-cell-padding-h * 2 - 1;
+      }
+    }
+
+    &:last-child {
+      min-height: $table-row-min-height + 2;
+
+      .aui-table__cell {
+        &:first-of-type {
+          border-bottom-left-radius: use-var(border-radius-l);
+        }
+
+        &:last-of-type {
+          border-bottom-right-radius: use-var(border-radius-l);
+        }
+      }
+    }
+
+    &:not(&:last-child) {
+      .aui-table__cell {
+        border-bottom-width: 0;
+      }
+    }
+  }
+
+  &--has-scroll {
+    .#{$stickyCssClass} {
+      &-border-elem-left:after,
+      &-border-elem-right:after {
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        width: 20px;
+        transition: box-shadow 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+
+      &-border-elem-left:before,
+      &-border-elem-right:before {
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        content: '';
+        @include vertical-dashed-line(1px, 'n-7');
+      }
+
+      &-border-elem-left {
+        padding-right: $table-cell-padding-h * 3;
+
+        &:after {
+          right: -$table-cell-padding-h;
+        }
+
+        &:before {
+          right: $table-cell-padding-h;
+        }
+      }
+
+      &-border-elem-right {
+        padding-left: $table-cell-padding-h * 3;
+
+        &:after {
+          left: -$table-cell-padding-h;
+        }
+
+        &:before {
+          left: $table-cell-padding-h;
+        }
+      }
+    }
+  }
+
+  &--scrolling {
+    .#{$stickyCssClass} {
+      &-border-elem-left:not(.aui-table__header-row) {
+        &:after {
+          @include theme-light {
+            box-shadow: inset 8px 0 4px -4px use-rgba(n-1, 0.16);
+          }
+          @include theme-dark {
+            box-shadow: inset 8px 0 4px -4px use-rgba(n-9, 0.75);
+          }
+        }
+
+        &:before {
+          @include vertical-dashed-line(1px, 'primary');
+        }
+      }
+    }
+  }
+
+  &--before-end {
+    .#{$stickyCssClass} {
+      &-border-elem-right:not(.aui-table__header-row) {
+        &:after {
+          @include theme-light {
+            box-shadow: inset -8px 0 4px -4px use-rgba(n-1, 0.16);
+          }
+          @include theme-dark {
+            box-shadow: inset -8px 0 4px -4px use-rgba(n-9, 0.75);
+          }
+        }
+
+        &:before {
+          @include vertical-dashed-line(1px, 'primary');
+        }
+      }
+    }
+  }
+}