@engie-group/fluid-design-system-angular/src/components/search/directives/search-button.directive.ts

Fluid Design System Angular

import {ChangeDetectorRef, Directive, DoCheck, inject, Input} from '@angular/core';
import {ButtonComponent} from '../../button/button.component';
import {ButtonSize} from '../../button/button.model';
import {SearchComponent} from '../search.component';

@Directive({
  selector: 'nj-button[njSearchButton]',
  standalone: true,
  host: {
    'class': 'nj-search__button'
  }
})
export class SearchButtonDirective implements DoCheck {
  private button = inject(ButtonComponent, {self: true});
  private search = inject(SearchComponent, {host: true});
  private cdr = inject(ChangeDetectorRef);

  @Input() isDisabled = false;

  private get searchScaleToButtonScale() {
    const map: Record<typeof this.search.scale, ButtonSize> = {
      sm: 'small',
      md: 'medium',
      lg: 'large',
      xl: 'xlarge'
    };
    return map[this.search.scale];
  }

  ngDoCheck() {
    if (this.searchScaleToButtonScale !== this.button.size) {
      this.button.size = this.searchScaleToButtonScale ?? 'medium';
      this.cdr.markForCheck();
    }

    if (this.search.disabled && (this.search.disabled !== this.button.isDisabled)) {
      this.button.isDisabled = this.search.disabled;
      this.cdr.markForCheck();
    }

    if (!this.search.disabled && (this.isDisabled !== this.button.isDisabled)) {
      this.button.isDisabled = this.isDisabled;
      this.cdr.markForCheck();
    }
  }
}