refactor(tab): from active ink to border (#277)

Author: lukonik

projects/ngverse/src/lib/tab/tab-group-header.component.ts

@@ -26,16 +26,16 @@ import { TabComponent } from './tab.component';
       display: flex;
       justify-content: center;
       cursor: pointer;
-      position: relative;
-      outline: none;
-      background: transparent;
-      border: 0;
-      font-size: 1rem;
+      border-bottom: 2px solid transparent;
+      &.selected {
+        border-bottom-color: var(--color-primary);
+      }
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class.is-active]': 'enabledTabIndex()',
+    '[class.selected]': 'isSelected()',
   },
 })
 export class TabGroupHeaderComponent implements Highlightable {
@@ -47,6 +47,8 @@ export class TabGroupHeaderComponent implements Highlightable {
   element = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>)
     .nativeElement;
   enabledTabIndex = signal(false);
+  isSelected = input.required<boolean>();
+
   setActiveStyles(): void {
     this.enabledTabIndex.set(true);
     this.element.focus();

projects/ngverse/src/lib/tab/tab-group.component.html

@@ -8,16 +8,11 @@
   @for (tab of tabs(); track $index) {
     <app-tab-group-header
       [tab]="tab"
+      [isSelected]="$index === selectedIndex()"
       #tabHeader
       (click)="selectTab($index)"
     ></app-tab-group-header>
   }
-  <div
-    #tabInk
-    class="tab-ink"
-    [style.width.px]="tabInkWidth()"
-    [style.left.px]="tabInkLeft()"
-  ></div>
 </div>
 <!--we need explicitely set ng-content, in order ssr work properly see (https://github.com/angular/angular/issues/50543)-->
 <ng-content></ng-content>

projects/ngverse/src/lib/tab/tab-group.component.ts

@@ -3,20 +3,16 @@ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { NgTemplateOutlet } from '@angular/common';
 import {
-  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   computed,
   contentChildren,
-  ElementRef,
   inject,
   Injector,
   input,
   model,
-  OnDestroy,
   output,
   signal,
-  viewChild,
   viewChildren,
 } from '@angular/core';
 import { TabGroupHeaderComponent } from './tab-group-header.component';
@@ -37,20 +33,13 @@ import { TabComponent } from './tab.component';
     ]),
   ],
 })
-export class TabGroupComponent implements OnDestroy {
+export class TabGroupComponent {
   tabs = contentChildren(TabComponent);
   selectedIndex = model(0);
   bodyGap = input(true);
 
   tabHeaders = viewChildren(TabGroupHeaderComponent);
 
-  tabHeadersEl = computed(() =>
-    this.tabHeaders().map((tabHeader) => tabHeader.element)
-  );
-
-  tabGroupHeader =
-    viewChild.required<ElementRef<HTMLElement>>('tabGroupHeader');
-
   direction = inject(Directionality);
 
   keyManager = new ActiveDescendantKeyManager(
@@ -74,42 +63,15 @@ export class TabGroupComponent implements OnDestroy {
   tabInkWidth = signal(0);
   tabInkLeft = signal(0);
 
-  resizeObserver: ResizeObserver | undefined;
-
-  constructor() {
-    afterNextRender(() => {
-      this.resizeObserver = new ResizeObserver(() => this.moveInk());
-      this.resizeObserver.observe(this.tabGroupHeader().nativeElement);
-    });
-  }
-
   onTabGroupFocus() {
     if (!this.keyManager.activeItem) {
       this.keyManager.setFirstItemActive();
     }
   }
 
-  private moveInk() {
-    const index = this.selectedIndex();
-    const tabHeader = this.tabHeadersEl()[index];
-    const tabGroupHeader = this.tabGroupHeader();
-    if (tabHeader) {
-      const rects = tabHeader.getBoundingClientRect();
-      const tabGroupRects =
-        tabGroupHeader.nativeElement.getBoundingClientRect();
-      this.tabInkLeft.set(rects.left - tabGroupRects.left);
-      this.tabInkWidth.set(rects.width);
-    }
-  }
-
   selectTab($event: number) {
     this.keyManager.setActiveItem($event);
     this.selectedIndex.set($event);
     this.tabChanged.emit($event);
-    this.moveInk();
-  }
-
-  ngOnDestroy(): void {
-    this.resizeObserver?.disconnect();
   }
 }