continue migrating tabs module

libs/components/src/tabs/shared/tab-list-item.directive.ts

@@ -12,7 +12,7 @@ import { Directive, ElementRef, HostBinding, Input, input } from "@angular/core"
 })
 export class TabListItemDirective implements FocusableOption {
   readonly active = input<boolean>(undefined);
-  // TODO: Skipped for migration because:
+  // TODO: Skipped for signal migration because:
   //  This input overrides a field from a superclass, while the superclass field
   //  is not migrated.
   @Input() disabled: boolean;

libs/components/src/tabs/tab-group/tab-body.component.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { TemplatePortal, CdkPortalOutlet } from "@angular/cdk/portal";
-import { Component, HostBinding, Input, input } from "@angular/core";
+import { Component, effect, HostBinding, input, signal } from "@angular/core";
 
 @Component({
   selector: "bit-tab-body",
@@ -9,28 +9,24 @@ import { Component, HostBinding, Input, input } from "@angular/core";
   imports: [CdkPortalOutlet],
 })
 export class TabBodyComponent {
-  private _firstRender: boolean;
+  private _firstRender = signal<boolean>(false);
 
   readonly content = input<TemplatePortal>(undefined);
   readonly preserveContent = input(false);
 
   @HostBinding("attr.hidden") get hidden() {
-    return !this.active || null;
+    return !this.active() || null;
   }
 
-  // TODO: Skipped for migration because:
-  //  Accessor inputs cannot be migrated as they are too complex.
-  @Input()
-  get active() {
-    return this._active;
+  active = input<boolean>();
+
+  constructor() {
+    effect(() => {
+      if (!this._firstRender() && this.active()) {
+        this._firstRender.set(true);
+      }
+    });
   }
-  set active(value: boolean) {
-    this._active = value;
-    if (this._active) {
-      this._firstRender = true;
-    }
-  }
-  private _active: boolean;
 
   /**
    * The tab content to render.
@@ -39,10 +35,10 @@ export class TabBodyComponent {
    * then the content persists after the first time content is rendered.
    */
   get tabContent() {
-    if (this.active) {
+    if (this.active()) {
       return this.content();
     }
-    if (this.preserveContent() && this._firstRender) {
+    if (this.preserveContent() && this._firstRender()) {
       return this.content();
     }
     return null;

libs/components/src/tabs/tab-nav-bar/tab-link.component.ts

@@ -36,7 +36,7 @@ export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestr
   };
 
   readonly route = input<string | any[]>(undefined);
-  // TODO: Skipped for migration because:
+  // TODO: Skipped for signal migration because:
   //  This input overrides a field from a superclass, while the superclass field
   //  is not migrated.
   @Input() disabled = false;