// mehrere Attribut-Direktiven in einer Datei

import { OnInit, Directive, ElementRef, Input, Renderer, HostListener } from '@angular/core';

@Directive({ selector: '[badge]' })
export class BadgeDirective {
 constructor(el: ElementRef, renderer: Renderer) {
  renderer.setElementClass(el.nativeElement, 'badge', true);
 }
}


@Directive({ selector: '[warning]' })
export class WarningDirective {
 constructor(private el: ElementRef, private renderer: Renderer) {
  this.renderer.setElementClass(this.el.nativeElement, 'btn', true);
  this.renderer.setElementClass(this.el.nativeElement, 'btn-warning', true);
  this.renderer.setElementStyle(this.el.nativeElement, 'color', 'white');
 }



}

@Directive({ selector: '[success]' })
export class SuccessDirective {
 constructor(el: ElementRef, renderer: Renderer) {
  renderer.setElementClass(el.nativeElement, 'btn', true);
  renderer.setElementClass(el.nativeElement, 'btn-success', true);
  renderer.setElementStyle(el.nativeElement, 'color', 'white');
 }
}


// Diese Direktive wird verwendet in der Vorlage Flugliste.htm.
@Directive({ selector: '[typ]' })
export class ButtonTypDirective implements OnInit {

 @Input('typ') typ: string; // Wert des Attributs art

 constructor(private el: ElementRef, private renderer: Renderer) {
 }
 ngOnInit() {
  // console.log("ButtonArtDirective:" + this.typ);
  this.renderer.setElementClass(this.el.nativeElement, 'btn', true);
  this.renderer.setElementClass(this.el.nativeElement, 'btn-' + (this.typ || "default"), true);
  this.renderer.setElementStyle(this.el.nativeElement, 'color', 'black');
 }

 @HostListener('mouseenter') onMouseEnter() {
  this.renderer.setElementStyle(this.el.nativeElement, 'color', 'red');
 }

 @HostListener('mouseleave') onMouseLeave() {
  this.renderer.setElementStyle(this.el.nativeElement, 'color', 'black');
 }
}

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
 private _defaultColor = 'yellow';

 constructor(private el: ElementRef, private renderer: Renderer) { }

 @Input('myHighlight') highlightColor: string;

 @HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this._defaultColor);
 }
 @HostListener('mouseleave') onMouseLeave() {
  this.highlight(null);
 }

 private highlight(color: string) {
  this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
 }
}