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

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import {
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  ContentChild,
  ContentChildren,
  EventEmitter,
  HostBinding,
  Input,
  Output,
  QueryList,
  ViewEncapsulation
} from '@angular/core';
import { ListGroupComponent } from '../list-group/list-group.component';
import { ListItemComponent } from '../list-item/list-item.component';
import { SidebarFooterDirective } from './directives/sidebar-footer.directive';
import { SidebarItemDirective } from './directives/sidebar-item.directive';
import { SidebarLogoDirective } from './directives/sidebar-logo.directive';

@Component({
  selector: 'nj-sidebar',
  templateUrl: './sidebar.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [
    CommonModule,
    ListGroupComponent,
    ListItemComponent,
    SidebarFooterDirective,
    SidebarItemDirective,
    SidebarLogoDirective
  ]
})
export class SidebarComponent {
  @HostBinding('class')
  private staticClass = 'nj-sidebar';

  /**
   * Whether the sidebar should be folded
   */
  @HostBinding('class.nj-sidebar--folded')
  @Input({ transform: booleanAttribute })
  isFolded = false;

  /**
   * Whether the sidebar should have a fold list item
   */
  @Input({ transform: booleanAttribute })
  hasFoldItem = true;

  /**
   * Fold list item label
   */
  @Input()
  foldItemLabel = 'Fold';

  /**
   * Emits an event when fold list item is clicked
   */
  @Output()
  foldItemClicked = new EventEmitter<MouseEvent>();

  @ContentChild(SidebarLogoDirective) protected logo?: SidebarLogoDirective;

  @ContentChildren(SidebarFooterDirective) protected footerElements?: QueryList<SidebarFooterDirective>;
}