@engie-group/fluid-design-system-angular/src/components/segmented-control-button/segmented-control-button.component.ts

Fluid Design System Angular

import {CommonModule} from '@angular/common';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  Output
} from '@angular/core';
import {IconComponent} from '../icon/icon.component';

@Component({
  selector: 'nj-segmented-control-button',
  templateUrl: './segmented-control-button.component.html',
  styleUrls: ['./segmented-control-button.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [IconComponent, CommonModule]
})
export class SegmentedControlButtonComponent {

  /**
   * Segmented control button value
   */
  @Input() value: string;

  /**
   * Whether button is selected or notre
   */
  @Input() isSelected = false;

  /**
   * Whether toggle is disabled or no
   */
  @Input() isDisabled: boolean;

  /**
   * Whether toggle has custom icon
   */
  @Input() hasCustomIcon: boolean;

  /**
   * Toggle material icon name
   */
  @Input() iconName: string;

  /**
   * Button click output. Emits a MouseEvent
   */
  @Output() buttonClick = new EventEmitter<MouseEvent>();

  constructor(private el: ElementRef, private cdr: ChangeDetectorRef) {
  }

  getClientBoundingRect(): DOMRect {
    return this.el?.nativeElement?.getBoundingClientRect();
  }

  setIsSelected(isSelected: boolean) {
    this.isSelected = isSelected;
    this.cdr.markForCheck();
  }

  setIsDisabled(isDisabled: boolean) {
    this.isDisabled = isDisabled;
    this.cdr.markForCheck();
  }
}