feat(Table): header cell now matches body cell alignment

GetTerminus · Oct 25, 2019 · 14e27de · 14e27de
1 parent bd4955c
commit 14e27de
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 36 deletions.
diff --git a/terminus-ui/table/src/cell.ts b/terminus-ui/table/src/cell.ts
@@ -30,6 +30,27 @@ import {
 } from './column';
 
 
+
+/**
+ * Set the column alignment styles
+ *
+ * @param column - The column definition
+ * @param renderer - The Renderer2
+ * @param elementRef - The element ref to add the class to
+ */
+export function setColumnAlignment(column: TsColumnDefDirective, renderer: Renderer2, elementRef: ElementRef): void {
+  if (column.alignment) {
+    // Verify the alignment value is allowed
+    if (tsTableColumnAlignmentTypesArray.indexOf(column.alignment) < 0 && isDevMode()) {
+      throw new TsUILibraryError(`TsCellDirective: "${column.alignment}" is not an allowed alignment.`
+        + `See "TsTableColumnAlignment" type for available options.`);
+    }
+
+    renderer.addClass(elementRef.nativeElement, 'ts-cell--align-right');
+  }
+}
+
+
 /**
  * Cell definition for the {@link TsTableComponent}.
  *
@@ -107,6 +128,11 @@ export class TsHeaderCellDirective extends CdkHeaderCell implements AfterViewIni
    */
   private window: Window;
 
+  /**
+   * Store a reference to the column
+   */
+  public column: TsColumnDefDirective;
+
   /**
    * Store references to event listener removal functions
    */
@@ -152,6 +178,7 @@ export class TsHeaderCellDirective extends CdkHeaderCell implements AfterViewIni
     private windowService: TsWindowService,
   ) {
     super(columnDef, elementRef);
+    this.column = columnDef as TsColumnDefDirective;
     this.document = documentService.document;
     this.window = windowService.nativeWindow;
     elementRef.nativeElement.classList.add(`ts-column-${columnDef.cssClassFriendlyName}`);
@@ -160,6 +187,8 @@ export class TsHeaderCellDirective extends CdkHeaderCell implements AfterViewIni
     if (columnDef._stickyEnd) {
       elementRef.nativeElement.classList.add(`ts-table--sticky-end`);
     }
+
+    setColumnAlignment(this.column, renderer, elementRef);
   }
 
 
@@ -300,7 +329,7 @@ export class TsCellDirective extends CdkCell {
       elementRef.nativeElement.classList.add(`ts-column-no-wrap`);
     }
 
-    TsCellDirective.setColumnAlignment(this.column, renderer, elementRef);
+    setColumnAlignment(this.column, renderer, elementRef);
 
     // eslint-disable-next-line no-underscore-dangle
     if (columnDef._stickyEnd) {
@@ -309,25 +338,4 @@ export class TsCellDirective extends CdkCell {
 
   }
 
-
-  /**
-   * Set the column alignment styles
-   *
-   * @param column - The column definition
-   * @param renderer - The Renderer2
-   * @param elementRef - The element ref to add the class to
-   */
-  private static setColumnAlignment(column: TsColumnDefDirective, renderer: Renderer2, elementRef: ElementRef): void {
-    if (column.alignment) {
-      // Verify the alignment value is allowed
-      if (tsTableColumnAlignmentTypesArray.indexOf(column.alignment) < 0 && isDevMode()) {
-        throw new TsUILibraryError(`TsCellDirective: "${column.alignment}" is not an allowed alignment.`
-          + `See "TsTableColumnAlignment" type for available options.`);
-      }
-
-      // Set inline style for text-align
-      renderer.setStyle(elementRef.nativeElement, 'textAlign', column.alignment);
-    }
-  }
-
 }
diff --git a/terminus-ui/table/src/table.component.spec.ts b/terminus-ui/table/src/table.component.spec.ts
@@ -30,7 +30,7 @@ export class TsWindowServiceMock {
 
   public get nativeWindow(): Window {
     return {
-      getComputedStyle: e => this.styleObject as CSSStyleDeclaration,
+      getComputedStyle: e => this.styleObject,
       open: noop,
       location: {
         href: 'foo/bar',
@@ -171,26 +171,16 @@ describe(`TsTableComponent`, function() {
       fixture.detectChanges();
     });
 
-    test(`should add the text-align style and set value to left`, () => {
+    test(`should add the text-align class`, () => {
       const column = fixture.nativeElement.querySelector('.ts-cell.ts-column-column_a');
 
-      let style;
-      if (column.style && column.style._values) {
-        style = column.style._values['text-align'];
-      }
-
-      expect(style).toEqual('left');
+      expect(column.classList).toContain('ts-cell--align-right');
     });
 
     test(`should NOT add the text-align style if alignment is not provided`, () => {
       const column = fixture.nativeElement.querySelector('.ts-cell.ts-column-column_b');
 
-      let style;
-      if (column.style && column.style._values) {
-        style = column.style._values['text-align'];
-      }
-
-      expect(style).toBeUndefined();
+      expect(column.classList).not.toContain('ts-cell--align-right');
     });
 
     test(`should NOT add the text-align style if alignment is not a valid alignment`, () => {