import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';


// TODO: this component is really just a wrapper with some styles. Move it to a stylesheet.
@Component({
  selector: 'onguard-multi-select',
  templateUrl: './multi-select.component.html',
  styleUrls: ['./multi-select.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class MultiSelectComponent<T> implements OnInit {

  @Input() label?: string;

  @Input() selected: T[] | T;
  @Output() selectedChange = new EventEmitter<T[]>();

  @Input() options: T[];
  @Input() placeholder: string;

  @Input() loading = false;

  
  @Input() bindLabel: string;
  @Input() searchable = true;
  @Input() multiple = true;
  @Input() clearable = true;

  @Input() disabled = false;

  @Input() styleType: 'primary' | 'alternate' = 'primary';


  constructor() { }

  ngOnInit(): void {
  }

  public ngModelChange(selection: T[]) {
    this.selectedChange.emit(selection);
  }

}