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

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event']) onClick(event) {
        if (event.target.hasAttribute("class"))
            if (event.target.getAttribute("class").includes("mat-option") || event.target.getAttribute("class") === "highlight-text-auto")
                return;
        if (!this._elementRef.nativeElement.contains(event.target)) {
            this.clickOutside.emit(event);
        }
    }
}