refactor(testbed): remove ngClass and migrate to [class]

packages/testbed/src/app/ui/mixer-button/mixer-button.component.html

@@ -1,3 +1,3 @@
-<button [ngClass]="ngClassDefinition" (click)="press.emit()">
+<button [class]="classDefinition()" (click)="press.emit()">
   <ng-content></ng-content>
 </button>

packages/testbed/src/app/ui/mixer-button/mixer-button.component.ts

@@ -1,23 +1,22 @@
-import { NgClass } from '@angular/common';
-import { Component, input, output } from '@angular/core';
+import { Component, computed, input, output } from '@angular/core';
 
 @Component({
   selector: 'sui-mixer-button',
   templateUrl: './mixer-button.component.html',
   styleUrls: ['./mixer-button.component.scss'],
-  imports: [NgClass],
+  imports: [],
 })
 export class MixerButtonComponent {
   activeClass = input('default-active');
   active = input(false);
   press = output();
 
-  get ngClassDefinition() {
-    if (!this.activeClass) {
+  classDefinition = computed(() => {
+    if (!this.activeClass()) {
       return;
     }
     return {
       [this.activeClass()]: !!this.active(),
     };
-  }
+  });
 }

packages/testbed/src/app/ui/prepost/prepost.component.html

@@ -8,7 +8,7 @@
 >
   Toggle PRE/POST
 </sui-mixer-button>
-<span class="badge ms-2" [ngClass]="{ 'badge-success': post, 'badge-secondary': !post }">
+<span class="badge ms-2" [class]="{ 'badge-success': post, 'badge-secondary': !post }">
   {{ post ? 'POST' : 'PRE' }}
 </span>
 }

packages/testbed/src/app/ui/prepost/prepost.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgClass } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component, OnDestroy, OnInit, input } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { SendChannel } from 'soundcraft-ui-connection';
@@ -8,7 +8,7 @@ import { MixerButtonComponent } from '../mixer-button/mixer-button.component';
   selector: 'sui-prepost',
   templateUrl: './prepost.component.html',
   styleUrls: ['./prepost.component.css'],
-  imports: [MixerButtonComponent, NgClass, AsyncPipe],
+  imports: [MixerButtonComponent, AsyncPipe],
 })
 export class PrepostComponent implements OnInit, OnDestroy {
   channel = input.required<SendChannel>();

packages/testbed/src/app/ui/vu-meter/vu-meter.component.html

@@ -1,4 +1,4 @@
-<div class="meter" [ngClass]="mode()">
+<div class="meter" [class]="mode()">
   <label>{{ sanitizedLabel() }}</label>
   <div class="bar" [style.width]="barWidth()"></div>
 </div>

packages/testbed/src/app/ui/vu-meter/vu-meter.component.ts

@@ -1,9 +1,8 @@
 import { Component, computed, input } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'sui-vu-meter',
-  imports: [NgClass],
+  imports: [],
   templateUrl: './vu-meter.component.html',
   styleUrl: './vu-meter.component.scss',
 })