src/app/devtools/devtools-tabs/component-explorer/component-forest/component-forest.component.html - 1.x/develop - 3axapp/ext-js-3-devtools

src/app/devtools/devtools-tabs/component-explorer/component-forest/component-forest.component.html

54 строки2 KB

A Zakharov

добавлены eslint, prettier

29 июл 2025, 10:36

29 июл 2025, 10:366b015af

<app-filter
  [hasMatched]="hasMatched"
  (filter)="handleFilter($event)"
  (nextMatched)="nextMatched()"
  (prevMatched)="prevMatched()"
></app-filter>
<cdk-virtual-scroll-viewport class="tree-wrapper" [itemSize]="itemHeight" (keydown)="keyDown($event)" [tabindex]="0">
  <ng-container *cdkVirtualFor="let node of dataSource; let idx = index">
    <div
      [class]="{
        matched: isMatched(node),
        selected: isSelected(node),
        highlighted: isHighlighted(node),
        'new-node': node.newItem,
      }"
      class="tree-node"
      (click)="selectAndEnsureVisible(node)"
      (dblclick)="handleSelectDomElement(node)"
      (mouseenter)="highlightNode(node.path)"
      (mouseleave)="removeHighlight()"
      [style.padding-left]="15 + 15 * node.level + 'px'"
    >
      <div class="tree-node-info">
        @if (node.expandable) {
          <button
            [style.left]="15 * node.level + 'px'"
            (click)="treeControl.toggle(node)"
            (dblclick)="stopPropagation($event)"
            [attr.aria-label]="'toggle ' + node.name"
          >
            <mat-icon class="mat-icon-rtl-mirror">
              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
            </mat-icon>
          </button>
        }
        <span class="element-name">
          {{ node.name }}
          @if (node.original.name) {
            <span class="name"
              >name=<span class="name__value">"{{ node.original.name }}"</span></span
            >
          }
          @if (node.original.modal) {
            <span class="modal">[modal]</span>
          }
        </span>

        @if (isSelected(node)) {
          <span class="console-reference"> == $ext0 </span>
        }
      </div>
    </div>
  </ng-container>
</cdk-virtual-scroll-viewport>