-
+
diff --git a/projects/sbb-esta/angular-public/table/src/table/table.component.scss b/projects/sbb-esta/angular-public/table/src/table/table.component.scss
index de2d69c90a..776a965fa4 100644
--- a/projects/sbb-esta/angular-public/table/src/table/table.component.scss
+++ b/projects/sbb-esta/angular-public/table/src/table/table.component.scss
@@ -1,17 +1,91 @@
-@import '../table';
+@import '../../../../angular-core/styles/common/variables';
+@import '../../../../angular-core/styles/common/colors';
+@import '../../../../angular-core/styles/common/functions';
+@import '../../../../angular-core/styles/common/mediaqueries';
-.sbb-table-container {
- .sbb-table-wrapper {
- @include tableWrapper();
+$tableBg: $sbbColorWhite;
+$tableBorderColor: $sbbColorCloud;
+$tableTheadBgColor: $sbbColorCloud;
+$tableTbodyStripesBgColor: $sbbColorMilk;
+$tableCaptionColor: $sbbColorGrey;
- &.sbb-table-is-scrolling {
- @include tableScrollingPinModeEnabled();
+sbb-table {
+ .sbb-table-container {
+ .sbb-table-wrapper .sbb-table {
+ border: pxToEm(1) solid $tableBorderColor;
+ }
+
+ .sbb-table-caption {
+ > * {
+ font-size: pxToEm(13);
+ color: $tableCaptionColor;
+ }
+ }
+ }
+
+ &.sbb-table-is-pinned .sbb-table-container .sbb-table-wrapper .sbb-table {
+ thead {
+ > tr {
+ th,
+ td {
+ &:first-child {
+ background-color: $tableTheadBgColor;
+ }
+ }
+ }
+ }
+
+ tbody,
+ tfoot {
+ > tr {
+ th,
+ td {
+ &:first-child {
+ background-color: $tableBg;
+ }
+ }
+
+ &:nth-child(even) {
+ th,
+ td {
+ &:first-child {
+ background-color: $tableTbodyStripesBgColor;
+ }
+ }
+ }
+ }
+ }
+
+ thead,
+ tbody,
+ tfoot {
+ > tr {
+ th,
+ td {
+ &:first-child {
+ left: 0;
+ position: sticky;
+ z-index: 1;
+ }
+ }
+ }
}
}
- .sbb-table-caption {
- > * {
- @include tableCaption();
+ &.sbb-table-is-pinned.sbb-table-is-scrolling {
+ thead,
+ tbody,
+ tfoot {
+ > tr {
+ th,
+ td {
+ &:first-child::after {
+ border-left: pxToEm(1) solid $sbbColorPlatinum;
+ background-image: linear-gradient(-270deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
+ opacity: 1;
+ }
+ }
+ }
}
}
}
diff --git a/projects/sbb-esta/angular-public/table/src/table/table.component.ts b/projects/sbb-esta/angular-public/table/src/table/table.component.ts
index 674bceb9d7..9e0a1b8c56 100644
--- a/projects/sbb-esta/angular-public/table/src/table/table.component.ts
+++ b/projects/sbb-esta/angular-public/table/src/table/table.component.ts
@@ -1,4 +1,24 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ HostBinding,
+ Input,
+ NgZone,
+ OnChanges,
+ OnDestroy,
+ SimpleChanges,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
+import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
+import { merge, Subject } from 'rxjs';
+import { distinctUntilChanged, mapTo, takeUntil } from 'rxjs/operators';
+
+const stickySupported =
+ typeof CSS !== 'undefined' &&
+ CSS.supports(
+ ['', '-o-', '-webkit-', '-moz-', '-ms-'].map(p => `(position: ${p}sticky)`).join(' or ')
+ );
@Component({
selector: 'sbb-table',
@@ -7,7 +27,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
-export class TableComponent {
+export class TableComponent implements OnChanges, OnDestroy {
/** Table identifier. */
@Input() tableId: string;
/** The labelledBy of the table component.*/
@@ -16,8 +36,6 @@ export class TableComponent {
@Input() tableAlignment: 'none' | 'left' | 'center' | 'right';
/** Types of pin mode. */
@Input() pinMode: 'off' | 'on' = 'off';
-
- private _tableClass: string;
/** Class value of the table. */
@Input()
set tableClass(classVal: string) {
@@ -36,4 +54,51 @@ export class TableComponent {
return classList;
}
+ private _tableClass: string;
+
+ /** @docs-private */
+ @ViewChild(PerfectScrollbarComponent, { static: true })
+ _perfectScrollbar: PerfectScrollbarComponent;
+
+ /** @docs-private */
+ @HostBinding('class.sbb-table-is-scrolling') _scrolling = false;
+ /** @docs-private */
+ @HostBinding('class.sbb-table-is-pinned') get _pinned() {
+ return this.pinMode === 'on';
+ }
+
+ private _scrollListener = new Subject();
+
+ constructor(private _zone: NgZone) {}
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (!stickySupported) {
+ return;
+ } else if (
+ changes.pinMode.currentValue === 'on' &&
+ (changes.pinMode.firstChange ||
+ changes.pinMode.previousValue !== changes.pinMode.currentValue)
+ ) {
+ merge(
+ this._perfectScrollbar.psXReachStart.pipe(mapTo(false)),
+ this._perfectScrollbar.psScrollRight.pipe(mapTo(true))
+ )
+ .pipe(
+ takeUntil(this._scrollListener),
+ distinctUntilChanged()
+ )
+ .subscribe(v => this._zone.run(() => (this._scrolling = v)));
+ } else if (
+ changes.pinMode.currentValue === 'off' &&
+ changes.pinMode.previousValue !== changes.pinMode.currentValue
+ ) {
+ this._scrollListener.next();
+ this._scrolling = false;
+ }
+ }
+
+ ngOnDestroy(): void {
+ this._scrollListener.next();
+ this._scrollListener.complete();
+ }
}
diff --git a/scripts/memory.ps1 b/scripts/memory.ps1
new file mode 100644
index 0000000000..5bb2349d1f
--- /dev/null
+++ b/scripts/memory.ps1
@@ -0,0 +1 @@
+$env:NODE_OPTIONS="--max_old_space_size=7168"
\ No newline at end of file