diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
index 2c307cfff8f..8da51ca14f7 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
@@ -1,53 +1,28 @@
load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
-package(default_visibility = ["//visibility:public"])
+package(default_visibility = ["//devtools:__subpackages__"])
-_STYLE_SRCS = [
- "component-metadata.component.scss",
- "property-tab.component.scss",
- "property-tab-header.component.scss",
-]
-
-_STYLE_LABELS = [
- src[:-len(".component.scss")].replace("-", "_") + "_styles"
- for src in _STYLE_SRCS
-]
-
-[
- sass_binary(
- name = label,
- src = src,
- deps = [
- "//devtools/projects/ng-devtools/src/styles:typography",
- ],
- )
- for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
-]
+sass_binary(
+ name = "property-tab_styles",
+ src = "property-tab.component.scss",
+)
ng_project(
name = "property-tab",
srcs = [
- "component-metadata.component.ts",
"property-tab.component.ts",
- "property-tab-header.component.ts",
],
angular_assets = [
"property-tab.component.html",
- "property-tab-header.component.html",
- "component-metadata.component.html",
- ] + _STYLE_LABELS,
+ ":property-tab_styles",
+ ],
deps = [
- "//:node_modules/@angular/common",
"//:node_modules/@angular/core",
- "//:node_modules/@angular/material",
- "//:node_modules/rxjs",
- "//devtools/projects/ng-devtools/src/lib/application-services:settings",
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header",
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view",
- "//devtools/projects/ng-devtools/src/lib/shared/button",
- "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
"//devtools/projects/protocol",
],
)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/BUILD.bazel
new file mode 100644
index 00000000000..cc8805cc5e4
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/BUILD.bazel
@@ -0,0 +1,30 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "property-tab-header_styles",
+ src = "property-tab-header.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "property-tab-header",
+ srcs = [
+ "property-tab-header.component.ts",
+ ],
+ angular_assets = [
+ "property-tab-header.component.html",
+ ":property-tab-header_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/core",
+ "//:node_modules/@angular/material",
+ "//devtools/projects/ng-devtools/src/lib/application-services:settings",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata",
+ "//devtools/projects/ng-devtools/src/lib/shared/button",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/BUILD.bazel
new file mode 100644
index 00000000000..00e1f2bd029
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/BUILD.bazel
@@ -0,0 +1,28 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "component-metadata_styles",
+ src = "component-metadata.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "component-metadata",
+ srcs = [
+ "component-metadata.component.ts",
+ ],
+ angular_assets = [
+ "component-metadata.component.html",
+ ":component-metadata_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/core",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+ "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
+ "//devtools/projects/protocol",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.scss
similarity index 89%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.scss
index 4fd8d87217b..5f8b14930e6 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../styles/typography';
+@use '../../../../../../styles/typography';
:host {
display: block;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.ts
similarity index 89%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.ts
index 257b3de9a4f..f7e5222aadf 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.ts
@@ -19,10 +19,10 @@ import {
AngularDirectiveMetadata,
AcxDirectiveMetadata,
ComponentType,
-} from '../../../../../../protocol';
+} from '../../../../../../../../protocol';
-import {ElementPropertyResolver} from '../property-resolver/element-property-resolver';
-import {DocsRefButtonComponent} from '../../../shared/docs-ref-button/docs-ref-button.component';
+import {ElementPropertyResolver} from '../../../property-resolver/element-property-resolver';
+import {DocsRefButtonComponent} from '../../../../../shared/docs-ref-button/docs-ref-button.component';
@Component({
selector: 'ng-component-metadata',
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss
similarity index 97%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss
index 4bdf215b864..d41fa34b185 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../styles/typography';
+@use '../../../../../styles/typography';
:host {
border-bottom: 1px solid var(--color-separator);
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.ts
similarity index 77%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.ts
index e62575561f8..28581a72292 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.ts
@@ -10,10 +10,10 @@ import {ChangeDetectionStrategy, Component, input, output, signal, inject} from
import {MatExpansionModule} from '@angular/material/expansion';
import {MatIcon} from '@angular/material/icon';
-import {IndexedNode} from '../directive-forest/index-forest';
-import {ComponentMetadataComponent} from './component-metadata.component';
-import {ButtonComponent} from '../../../shared/button/button.component';
-import {Settings} from '../../../application-services/settings';
+import {IndexedNode} from '../../directive-forest/index-forest';
+import {ComponentMetadataComponent} from './component-metadata/component-metadata.component';
+import {ButtonComponent} from '../../../../shared/button/button.component';
+import {Settings} from '../../../../application-services/settings';
@Component({
templateUrl: './property-tab-header.component.html',
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html
index 0f0a25ee626..fe9cb36ff3a 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html
@@ -5,12 +5,17 @@
[currentSelectedElement]="currentSelectedElement"
(showSignalGraph)="showSignalGraph.emit(null)"
/>
-
+
+
+ @for (directive of currentDirectives(); track $index) {
+
+ }
+
@let hydration = currentSelectedElement.hydration;
@if (hydration && hydration.status === 'dehydrated') {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss
index bb6a1f07297..6cb5480110e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss
@@ -1,3 +1,11 @@
.dehydrated-component {
- padding: 12px;
+ padding: 0.75rem;
+}
+
+/* FRAGILE */
+::ng-deep {
+ .mat-expansion-panel {
+ border-bottom: 1px solid var(--color-separator);
+ box-shadow: none !important;
+ }
}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts
index 911f08e5c2a..02b5cc3e6c6 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts
@@ -6,20 +6,20 @@
* found in the LICENSE file at https://angular.dev/license
*/
-import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core';
import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../protocol';
import {IndexedNode} from '../directive-forest/index-forest';
import {FlatNode} from '../property-resolver/element-property-resolver';
-import {PropertyTabBodyComponent} from './property-view/property-tab-body.component';
-import {PropertyTabHeaderComponent} from './property-tab-header.component';
+import {PropertyTabHeaderComponent} from './property-tab-header/property-tab-header.component';
import {DeferViewComponent} from './defer-view/defer-view.component';
+import {PropertyViewComponent} from './property-view/property-view.component';
@Component({
selector: 'ng-property-tab',
templateUrl: './property-tab.component.html',
styleUrls: ['./property-tab.component.scss'],
- imports: [PropertyTabHeaderComponent, PropertyTabBodyComponent, DeferViewComponent],
+ imports: [PropertyTabHeaderComponent, PropertyViewComponent, DeferViewComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PropertyTabComponent {
@@ -28,4 +28,16 @@ export class PropertyTabComponent {
readonly viewSource = output();
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
readonly showSignalGraph = output();
+
+ readonly currentDirectives = computed(() => {
+ const selected = this.currentSelectedElement();
+ if (!selected) {
+ return;
+ }
+ const directives = [...selected.directives];
+ if (selected.component) {
+ directives.push(selected.component);
+ }
+ return directives;
+ });
}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel
index 25184bc3a1a..4d93c8d09b2 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel
@@ -1,72 +1,26 @@
load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
-package(default_visibility = ["//visibility:public"])
+package(default_visibility = ["//devtools:__subpackages__"])
-_STYLE_SRCS = [
- "property-editor.component.scss",
- "property-preview.component.scss",
- "property-tab-body.component.scss",
- "property-view.component.scss",
- "property-view-body.component.scss",
- "property-view-header.component.scss",
- "property-view-tree.component.scss",
- "dependency-viewer.component.scss",
-]
-
-_STYLE_LABELS = [
- src[:-len(".component.scss")].replace("-", "_") + "_styles"
- for src in _STYLE_SRCS
-]
-
-[
- sass_binary(
- name = label,
- src = src,
- deps = [
- "//devtools/projects/ng-devtools/src/styles:typography",
- ],
- )
- for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
-]
+sass_binary(
+ name = "property-view_styles",
+ src = "property-view.component.scss",
+)
ng_project(
name = "property-view",
srcs = [
- "dependency-viewer.component.ts",
- "property-editor.component.ts",
- "property-preview.component.ts",
- "property-tab-body.component.ts",
"property-view.component.ts",
- "property-view-body.component.ts",
- "property-view-header.component.ts",
- "property-view-tree.component.ts",
],
angular_assets = [
"property-view.component.html",
- "property-view-tree.component.html",
- "property-view-header.component.html",
- "property-view-body.component.html",
- "property-preview.component.html",
- "property-editor.component.html",
- "property-tab-body.component.html",
- "dependency-viewer.component.html",
- ] + _STYLE_LABELS,
+ ":property-view_styles",
+ ],
deps = [
- "//:node_modules/@angular/cdk",
- "//:node_modules/@angular/common",
"//:node_modules/@angular/core",
- "//:node_modules/@angular/forms",
- "//:node_modules/@angular/material",
- "//:node_modules/rxjs",
- "//devtools/projects/ng-devtools/src/lib/application-environment",
- "//devtools/projects/ng-devtools/src/lib/application-providers:supported_apis",
- "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
- "//devtools/projects/ng-devtools/src/lib/application-services:settings",
- "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
- "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path",
- "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
- "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header",
"//devtools/projects/protocol",
],
)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html
deleted file mode 100644
index 3ab3efd95b0..00000000000
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-@for (directive of currentDirectives(); track $index) {
-
-
-
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.scss
deleted file mode 100644
index df7fddf8d44..00000000000
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-::ng-deep {
- .mat-expansion-panel {
- border-bottom: 1px solid var(--color-separator);
- box-shadow: none !important;
- }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts
deleted file mode 100644
index 277622179fe..00000000000
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-
-import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core';
-import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../protocol';
-
-import {IndexedNode} from '../../directive-forest/index-forest';
-import {FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyViewComponent} from './property-view.component';
-
-@Component({
- templateUrl: './property-tab-body.component.html',
- selector: 'ng-property-tab-body',
- styleUrls: ['./property-tab-body.component.scss'],
- imports: [PropertyViewComponent],
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PropertyTabBodyComponent {
- readonly currentSelectedElement = input.required();
-
- readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
- readonly viewSource = output();
- readonly showSignalGraph = output();
-
- readonly currentDirectives = computed(() => {
- const selected = this.currentSelectedElement();
- if (!selected) {
- return;
- }
- const directives = [...selected.directives];
- if (selected.component) {
- directives.push(selected.component);
- }
- return directives;
- });
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/BUILD.bazel
new file mode 100644
index 00000000000..d5a129178b0
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/BUILD.bazel
@@ -0,0 +1,32 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "property-view-body_styles",
+ src = "property-view-body.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "property-view-body",
+ srcs = [
+ "property-view-body.component.ts",
+ ],
+ angular_assets = [
+ "property-view-body.component.html",
+ ":property-view-body_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/cdk",
+ "//:node_modules/@angular/core",
+ "//:node_modules/@angular/material",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree",
+ "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
+ "//devtools/projects/protocol",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/BUILD.bazel
new file mode 100644
index 00000000000..d722bcd853a
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/BUILD.bazel
@@ -0,0 +1,28 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "dependency-viewer_styles",
+ src = "dependency-viewer.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "dependency-viewer",
+ srcs = [
+ "dependency-viewer.component.ts",
+ ],
+ angular_assets = [
+ "dependency-viewer.component.html",
+ ":dependency-viewer_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/core",
+ "//:node_modules/@angular/material",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path",
+ "//devtools/projects/protocol",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.scss
similarity index 94%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.scss
index 12c26ffd926..af8d889926a 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.scss
@@ -1,6 +1,8 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../../styles/typography';
:host {
+ display: block;
+
.dep-data {
display: flex;
flex-wrap: nowrap;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.ts
similarity index 91%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.ts
index b6cf5031ce5..a4e7c161667 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.ts
@@ -7,7 +7,7 @@
*/
import {ChangeDetectionStrategy, Component, input} from '@angular/core';
-import {SerializedInjectedService} from '../../../../../../../protocol';
+import {SerializedInjectedService} from '../../../../../../../../../protocol';
import {ResolutionPathComponent} from './resolution-path/resolution-path.component';
import {MatTooltip} from '@angular/material/tooltip';
import {MatExpansionModule} from '@angular/material/expansion';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/BUILD.bazel
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/BUILD.bazel
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/BUILD.bazel
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.scss
similarity index 96%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.scss
index 9bcaea8dada..2f59e791a5f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../../../styles/typography';
+@use '../../../../../../../../styles/typography';
:host {
display: flex;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.spec.ts
similarity index 96%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.spec.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.spec.ts
index 99bbf905d11..86c2fac9440 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.spec.ts
@@ -10,7 +10,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {NODE_TYPE_CLASS_MAP, ResolutionPathComponent} from './resolution-path.component';
-import {SerializedInjector} from '../../../../../../../../protocol';
+import {SerializedInjector} from '../../../../../../../../../../protocol';
describe('ResolutionPath', () => {
let component: ResolutionPathComponent;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.ts
similarity index 92%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.ts
index 75427dc3716..130650adf7b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.ts
@@ -7,7 +7,7 @@
*/
import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
-import {SerializedInjector} from '../../../../../../../../protocol';
+import {SerializedInjector} from '../../../../../../../../../../protocol';
export const NODE_TYPE_CLASS_MAP: {[key in SerializedInjector['type']]: string} = {
'element': 'type-element',
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.html
similarity index 87%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.html
index 769921c1bd6..2d56152a435 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.html
@@ -10,7 +10,11 @@
-
+
+ @for (dependency of dependencies(); track dependency.position[0]) {
+
+ }
+
}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.scss
similarity index 79%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.scss
index 54d8cff9bcb..4c7cde7dfc1 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.scss
@@ -1,10 +1,17 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../styles/typography';
:host {
ng-docs-ref-button {
margin-left: 0.125rem;
}
+ .services {
+ margin: 0.5rem;
+ border-radius: 0.375rem;
+ background: color-mix(in srgb, var(--senary-contrast) 50%, var(--color-background) 50%);
+ overflow: hidden;
+ }
+
/* FRAGILE */
::ng-deep {
mat-expansion-panel {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts
similarity index 63%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts
index c26d45d78ec..c8ea9af9bbf 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts
@@ -12,26 +12,21 @@ import {
Component,
ɵFramework as Framework,
computed,
- forwardRef,
input,
output,
signal,
} from '@angular/core';
-import {
- DebugSignalGraphNode,
- DirectivePosition,
- SerializedInjectedService,
-} from '../../../../../../../protocol';
+import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../../protocol';
import {
DirectivePropertyResolver,
DirectiveTreeData,
-} from '../../property-resolver/directive-property-resolver';
-import {FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyViewTreeComponent} from './property-view-tree.component';
+} from '../../../property-resolver/directive-property-resolver';
+import {FlatNode} from '../../../property-resolver/element-property-resolver';
+import {PropertyViewTreeComponent} from './property-view-tree/property-view-tree.component';
import {MatExpansionModule} from '@angular/material/expansion';
-import {DependencyViewerComponent} from './dependency-viewer.component';
-import {DocsRefButtonComponent} from '../../../../shared/docs-ref-button/docs-ref-button.component';
+import {DependencyViewerComponent} from './dependency-viewer/dependency-viewer.component';
+import {DocsRefButtonComponent} from '../../../../../shared/docs-ref-button/docs-ref-button.component';
@Component({
selector: 'ng-property-view-body',
@@ -40,10 +35,10 @@ import {DocsRefButtonComponent} from '../../../../shared/docs-ref-button/docs-re
imports: [
MatExpansionModule,
CdkDropList,
- forwardRef(() => InjectedServicesComponent),
CdkDrag,
PropertyViewTreeComponent,
DocsRefButtonComponent,
+ DependencyViewerComponent,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
@@ -109,46 +104,3 @@ export class PropertyViewBodyComponent {
});
}
}
-
-@Component({
- selector: 'ng-injected-services',
- template: `
-
- @for (dependency of dependencies(); track dependency.position[0]) {
-
- }
-
- `,
- styles: [
- `
- :host {
- display: block;
- padding: 0.5rem;
-
- .services {
- border-radius: 0.375rem;
- background: color-mix(in srgb, var(--senary-contrast) 50%, var(--color-background) 50%);
- overflow: hidden;
-
- .wrapper {
- ng-dependency-viewer {
- display: block;
- }
- }
- }
- `,
- ],
- imports: [DependencyViewerComponent],
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class InjectedServicesComponent {
- readonly controller = input.required();
-
- readonly dependencies = computed(() => {
- const metadata = this.controller().directiveMetadata;
- if (!metadata) return [];
- if (!('dependencies' in metadata)) return [];
-
- return metadata.dependencies ?? [];
- });
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/BUILD.bazel
new file mode 100644
index 00000000000..ea3f19ccfc9
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/BUILD.bazel
@@ -0,0 +1,35 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "property-view-tree_styles",
+ src = "property-view-tree.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "property-view-tree",
+ srcs = [
+ "property-view-tree.component.ts",
+ ],
+ angular_assets = [
+ "property-view-tree.component.html",
+ ":property-view-tree_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/cdk",
+ "//:node_modules/@angular/common",
+ "//:node_modules/@angular/core",
+ "//:node_modules/@angular/material",
+ "//devtools/projects/ng-devtools/src/lib/application-providers:supported_apis",
+ "//devtools/projects/ng-devtools/src/lib/application-services:settings",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
+ "//devtools/projects/protocol",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/BUILD.bazel
new file mode 100644
index 00000000000..1c5bc60df83
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "property-editor_styles",
+ src = "property-editor.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "property-editor",
+ srcs = [
+ "property-editor.component.ts",
+ ],
+ angular_assets = [
+ "property-editor.component.html",
+ ":property-editor_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/core",
+ "//:node_modules/@angular/forms",
+ "//devtools/projects/protocol",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.scss
similarity index 86%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.scss
index 40bdf79c26d..63cc8740a94 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../../../styles/typography';
.editor {
cursor: text;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.ts
similarity index 97%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.ts
index 4831fcf0143..a82843c4883 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.ts
@@ -18,7 +18,7 @@ import {
ChangeDetectionStrategy,
} from '@angular/core';
import {FormsModule} from '@angular/forms';
-import {ContainerType} from '../../../../../../../protocol';
+import {ContainerType} from '../../../../../../../../../../protocol';
type EditorType = string | number | boolean;
type EditorResult = EditorType | Array;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/BUILD.bazel
new file mode 100644
index 00000000000..9a83f38e220
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "property-preview_styles",
+ src = "property-preview.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "property-preview",
+ srcs = [
+ "property-preview.component.ts",
+ ],
+ angular_assets = [
+ "property-preview.component.html",
+ ":property-preview_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/core",
+ "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+ "//devtools/projects/protocol",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.scss
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.scss
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.ts
similarity index 84%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.ts
index 76449fe02d8..2c5d9ccbc09 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.ts
@@ -7,9 +7,9 @@
*/
import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core';
-import {PropType} from '../../../../../../../protocol';
+import {PropType} from '../../../../../../../../../../protocol';
-import {FlatNode} from '../../property-resolver/element-property-resolver';
+import {FlatNode} from '../../../../../property-resolver/element-property-resolver';
@Component({
selector: 'ng-property-preview',
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.scss
similarity index 96%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.scss
index 338fbc39d09..3ab7b48535b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../../styles/typography';
:host {
width: 100%;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.ts
similarity index 76%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.ts
index 18166d703c3..71def71d4d4 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.ts
@@ -6,21 +6,21 @@
* found in the LICENSE file at https://angular.dev/license
*/
-import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, input, output} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MatTooltip} from '@angular/material/tooltip';
import {MatIcon} from '@angular/material/icon';
import {FlatTreeControl} from '@angular/cdk/tree';
-import {FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyDataSource} from '../../property-resolver/property-data-source';
-import {PropertyEditorComponent} from './property-editor.component';
-import {PropertyPreviewComponent} from './property-preview.component';
+import {FlatNode} from '../../../../property-resolver/element-property-resolver';
+import {PropertyDataSource} from '../../../../property-resolver/property-data-source';
+import {PropertyEditorComponent} from './property-editor/property-editor.component';
+import {PropertyPreviewComponent} from './property-preview/property-preview.component';
import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular/material/tree';
-import {SUPPORTED_APIS} from '../../../../application-providers/supported_apis';
-import {SignalGraphManager} from '../../signal-graph/signal-graph-manager';
-import {DebugSignalGraphNode} from '../../../../../../../protocol';
-import {Settings} from '../../../../application-services/settings';
+import {SUPPORTED_APIS} from '../../../../../../application-providers/supported_apis';
+import {SignalGraphManager} from '../../../../signal-graph/signal-graph-manager';
+import {DebugSignalGraphNode} from '../../../../../../../../../protocol';
+import {Settings} from '../../../../../../application-services/settings';
@Component({
selector: 'ng-property-view-tree',
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/BUILD.bazel
new file mode 100644
index 00000000000..372aa9fb9ba
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/BUILD.bazel
@@ -0,0 +1,28 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+ name = "property-view-header_styles",
+ src = "property-view-header.component.scss",
+ deps = [
+ "//devtools/projects/ng-devtools/src/styles:typography",
+ ],
+)
+
+ng_project(
+ name = "property-view-header",
+ srcs = [
+ "property-view-header.component.ts",
+ ],
+ angular_assets = [
+ "property-view-header.component.html",
+ ":property-view-header_styles",
+ ],
+ deps = [
+ "//:node_modules/@angular/cdk",
+ "//:node_modules/@angular/core",
+ "//:node_modules/@angular/material",
+ "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
+ ],
+)
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.html
similarity index 100%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.html
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.html
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.scss
similarity index 92%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.scss
index f66442bbc51..13618984237 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../styles/typography';
mat-toolbar {
@extend %body-medium-01;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.ts
similarity index 95%
rename from devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts
rename to devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.ts
index 665b418ab58..6e42aa870ad 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.ts
@@ -11,7 +11,7 @@ import {MatIcon} from '@angular/material/icon';
import {MatTooltip} from '@angular/material/tooltip';
import {MatToolbar} from '@angular/material/toolbar';
import {Platform} from '@angular/cdk/platform';
-import {FrameManager} from '../../../../application-services/frame_manager';
+import {FrameManager} from '../../../../../application-services/frame_manager';
@Component({
selector: 'ng-property-view-header',
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts
index 9d228d5ee3c..3ca2d07fa62 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts
@@ -10,8 +10,8 @@ import {ChangeDetectionStrategy, Component, computed, inject, input, output} fro
import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../protocol';
import {ElementPropertyResolver, FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyViewBodyComponent} from './property-view-body.component';
-import {PropertyViewHeaderComponent} from './property-view-header.component';
+import {PropertyViewBodyComponent} from './property-view-body/property-view-body.component';
+import {PropertyViewHeaderComponent} from './property-view-header/property-view-header.component';
@Component({
selector: 'ng-property-view',