Nx MCP Server

import { Option } from '@nx-console/shared-schema';
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { FieldValueConsumer } from './field-value-consumer-mixin';

@customElement('field-nav-item')
export class FieldNavItem extends FieldValueConsumer(LitElement) {
  @property()
  option: Option;

  @property()
  greyedOut = false;

  render() {
    return html`
      <li
        data-cy="field-nav-item-${this.option.name}"
        @click="${this.handleTreeClickEvent}"
        class="${this.shouldRenderError()
          ? 'text-error'
          : this.shouldRenderChanged()
            ? 'text-primary'
            : this.greyedOut
              ? 'text-mutedForeground'
              : 'text-foreground'} hover:bg-fieldNavHoverBackground cursor-pointer overflow-hidden text-ellipsis"
      >
        ${this.option.name}
      </li>
    `;
  }

  private handleTreeClickEvent() {
    const event = new CustomEvent('click', {
      detail: this.option.name,
    });
    this.dispatchEvent(event);
  }

  protected createRenderRoot(): Element | ShadowRoot {
    return this;
  }
}