import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';

@Directive({ selector: '[uiToggle]', exportAs: 'uiToggle' })
export class UiToggleDirective {
  @Input()
  @HostBinding('class.toggled')
  toggled = false;

  @Output()
  toggledChange = new EventEmitter<boolean>();

  constructor() {}

  @HostListener('click')
  toggle() {
    this.toggled = !this.toggled;
    this.toggledChange.emit(this.toggled);
  }

  open() {
    this.toggled = true;
    this.toggledChange.emit(this.toggled);
  }

  close() {
    this.toggled = false;
    this.toggledChange.emit(this.toggled);
  }
}
