@engie-group/fluid-design-system-angular/src/components/list-group/list-group.component.ts

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'nj-list-group',
  templateUrl: './list-group.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [CommonModule]
})
export class ListGroupComponent {
  /**
   * List id attribute
   */
  @Input() listId?: string;

  /**
   * Whether group items are clickable
   */
  @Input() isClickable: boolean;

  /**
   * Whether it is a checkbox list or not
   */
  @Input() isCheckboxList: boolean;

  /**
   * Whether group items have borders
   */
  @Input() hasBorder = true;

  /**
   * Whether list is dense or not, i.e: smaller
   */
  @Input() isDense = false;

  /**
   * Add role="listbox" and tabindex="-1" to the element.
   *
   * Used by `nj-select` for accessibility reasons.
   */
  @Input() isCustomSelectList: boolean = false;

  /**
   * Accessible label for the list when using "listbox" role.
   */
  @Input() ariaLabel?: string;

  /**
   * Whether list is multi-select or not, to add necessary accessible labels
   */
  @Input() isMultiSelect: boolean = false;

  @ViewChild('root')
  public rootEl: ElementRef<HTMLUListElement>;

  constructor(public readonly element: ElementRef<HTMLElement>) {}
}