refactor(devtools): display Wiz non-prop data as "State" (angular#60475)

This is the more common term for Wiz developers to reduce confusion between Wiz "props" and standard JS "properties".

PR Close angular#60475

Author: dgp1130

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html

@@ -27,7 +27,7 @@
         @if (panel.controls().dataSource.data.length > 0) {
           <mat-expansion-panel [expanded]="true">
             <mat-expansion-panel-header collapsedHeight="25px" expandedHeight="25px">
-              <mat-panel-title>{{ panel.title }}</mat-panel-title>
+              <mat-panel-title>{{ panel.title() }}</mat-panel-title>
             </mat-expansion-panel-header>
             <ng-property-view-tree
               [dataSource]="panel.controls().dataSource"

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts

@@ -7,7 +7,15 @@
  */
 
 import {CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag} from '@angular/cdk/drag-drop';
-import {Component, computed, forwardRef, input, output, signal} from '@angular/core';
+import {
+  Component,
+  ɵFramework as Framework,
+  computed,
+  forwardRef,
+  input,
+  output,
+  signal,
+} from '@angular/core';
 import {DirectivePosition, SerializedInjectedService} from 'protocol';
 
 import {
@@ -54,19 +62,20 @@ export class PropertyViewBodyComponent {
 
   protected readonly panels = signal([
     {
-      title: 'Inputs',
+      title: () => 'Inputs',
       controls: () => this.directiveInputControls(),
     },
     {
-      title: 'Props',
+      title: () => 'Props',
       controls: () => this.directivePropControls(),
     },
     {
-      title: 'Outputs',
+      title: () => 'Outputs',
       controls: () => this.directiveOutputControls(),
     },
     {
-      title: 'Properties',
+      title: () =>
+        this.controller().directiveMetadata?.framework === Framework.Wiz ? 'State' : 'Properties',
       controls: () => this.directiveStateControls(),
     },
   ]);