import {
  Component,
  EventEmitter,
  HostBinding,
  Input,
  Output,
} from "@angular/core";
import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

@Component({
  selector: "my-popup",
  template: `
    Popup: {{ message }}
    ✖
  `,
  animations: [
    trigger("state", [
      state(
        "opened",
        style({ transform: "translateY(0%)" })
      ),
      state(
        "void, closed",
        style({ transform: "translateY(100%)", opacity: 0 })
      ),
      transition("* => *", animate("100ms ease-in")),
    ]),
  ],
  styles: [
    `
      :host {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #009cff;
        height: 48px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid black;
        font-size: 24px;
      }

      button {
        border-radius: 50%;
      }
    `,
  ],
})
export class PopupComponent {
  @HostBinding("@state")
  state: "opened" | "closed" = "closed";

  @Input()
  get message(): string {
    return this._message;
  }
  set message(message: string) {
    this._message = message;
    this.state = "opened";
  }
  private _message = "";

  @Output()
  closed = new EventEmitter();
}

export class ItemOutputComponent {
  @Output() newItemEvent = new EventEmitter();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

export class SizerComponent {
  @Input() size!: number | string;
  @Output() sizeChange = new EventEmitter();

  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(
      40,
      Math.max(8, +this.size + delta)
    );
    this.sizeChange.emit(this.size);
  }
}

@Output() newItemEvent = new EventEmitter();

@Component({
  selector: "app-zippy",
  template: `
    

      
Toggle
      

        
      
    
  `,
})
export class ZippyComponent {
  visible = true;
  @Output() open = new EventEmitter();
  @Output() close = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}

@Directive({
  selector: "[appHighlight]",
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener("mouseenter") onMouseEnter() {
    this.highlight("yellow");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

import {
  Directive,
  ElementRef,
  HostListener,
  Input,
} from "@angular/core";

@Directive({
  selector: "[appHighlight]",
})
export class HighlightDirective {
  @Input("appHighlight") highlightColor = "";

  private el: HTMLElement;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.highlight(this.highlightColor || "cyan");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
  }
}

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
  this.highlight('');
}

private highlight(color: string) {
  this.el.nativeElement.style.backgroundColor = color;
}

@HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this.defaultColor || 'red');
}

import {
  Component,
  OnInit,
  Self,
  SkipSelf,
} from "@angular/core";
import {
  BROWSER_STORAGE,
  BrowserStorageService,
} from "./storage.service";

@Component({
  selector: "app-storage",
  template: `
    Open the inspector to see the local/session storage
    keys:

    
Session Storage
    
      Set Session Storage
    

    
Local Storage
    Set Local Storage
  `,
  providers: [
    BrowserStorageService,
    {
      provide: BROWSER_STORAGE,
      useFactory: () => sessionStorage,
    },
  ],
})
export class StorageComponent implements OnInit {
  constructor(
    @Self()
    private sessionStorageService: BrowserStorageService,
    @SkipSelf()
    private localStorageService: BrowserStorageService
  ) {}

  ngOnInit() {}

  setSession() {
    this.sessionStorageService.set(
      "hero",
      "Dr Nice - Session"
    );
  }

  setLocal() {
    this.localStorageService.set("hero", "Dr Nice - Local");
  }
}

const template = "
{{hero.name}}
";

@Component({
  selector: "app-hero",
  template: template,
})
export class HeroComponent {
  @Input() hero: Hero;
}

@Input() set appUnless(condition: boolean) {
  if (!condition && !this.hasView) {
    this.viewContainer.createEmbeddedView(this.templateRef);
    this.hasView = true;
  } else if (condition && this.hasView) {
    this.viewContainer.clear();
    this.hasView = false;
  }
}

import { Component, Input } from "@angular/core";

import { AdComponent } from "./ad.component";

@Component({
  template: `
    

      
{{ data.headline }}

      {{ data.body }}
    
  `,
})
export class HeroJobAdComponent implements AdComponent {
  @Input() data: any;
}

export class StoutItemComponent {
  @Input() item!: Item;
}

const template = "
{{hero.name}}
";

@Component({
  selector: "app-hero",
  template: template + "
{{hero.title}}
",
})
export class HeroComponent {
  @Input() hero: Hero;
}

import { Component, Input } from "@angular/core"; // First, import Input
export class ItemDetailComponent {
  @Input() item = ""; // decorate the property with @Input()
}

@Directive({
  selector: "[appForbiddenName]",
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ForbiddenValidatorDirective,
      multi: true,
    },
  ],
})
export class ForbiddenValidatorDirective
  implements Validator
{
  @Input("appForbiddenName") forbiddenName = "";

  validate(
    control: AbstractControl
  ): ValidationErrors | null {
    return this.forbiddenName
      ? forbiddenNameValidator(
          new RegExp(this.forbiddenName, "i")
        )(control)
      : null;
  }
}

export type Loaded = { type: "loaded"; data: T };
export type Loading = { type: "loading" };
export type LoadingState = Loaded | Loading;
export class IfLoadedDirective {
  @Input("ifLoaded") set state(state: LoadingState) {}
  static ngTemplateGuard_state(
    dir: IfLoadedDirective,
    expr: LoadingState
  ): expr is Loaded {
    return true;
  }
}

export interface Person {
  name: string;
}

@Component({
  template: `
{{ state.data }}
`,
})
export class AppComponent {
  state: LoadingState;
}

import {
  Directive,
  ElementRef,
  Input,
  OnChanges,
} from "@angular/core";

@Directive({ selector: "[highlight]" })
/**
 * Set backgroundColor for the attached element to highlight color
 * and set the element's customProperty to true
 */
export class HighlightDirective implements OnChanges {
  defaultColor = "rgb(211, 211, 211)"; // lightgray

  @Input("highlight") bgColor = "";

  constructor(private el: ElementRef) {
    el.nativeElement.style.customProperty = true;
  }

  ngOnChanges() {
    this.el.nativeElement.style.backgroundColor =
      this.bgColor || this.defaultColor;
  }
}

import {
  Directive,
  ElementRef,
  HostListener,
  Input,
} from "@angular/core";

@Directive({
  selector: "[appHighlight]",
})
export class HighlightDirective {
  @Input("appHighlight") highlightColor = "";

  private el: HTMLElement;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.highlight(this.highlightColor || "cyan");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
  }
}

@Input() appHighlight = '';

import {
  Component,
  EventEmitter,
  HostBinding,
  Input,
  Output,
} from "@angular/core";
import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

@Component({
  selector: "my-popup",
  template: `
    Popup: {{ message }}
    ✖
  `,
  animations: [
    trigger("state", [
      state(
        "opened",
        style({ transform: "translateY(0%)" })
      ),
      state(
        "void, closed",
        style({ transform: "translateY(100%)", opacity: 0 })
      ),
      transition("* => *", animate("100ms ease-in")),
    ]),
  ],
  styles: [
    `
      :host {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #009cff;
        height: 48px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid black;
        font-size: 24px;
      }

      button {
        border-radius: 50%;
      }
    `,
  ],
})
export class PopupComponent {
  @HostBinding("@state")
  state: "opened" | "closed" = "closed";

  @Input()
  get message(): string {
    return this._message;
  }
  set message(message: string) {
    this._message = message;
    this.state = "opened";
  }
  private _message = "";

  @Output()
  closed = new EventEmitter();
}

import { Component, OnInit, Input } from "@angular/core";
import { Hero } from "../hero";

@Component({
  selector: "app-hero-detail",
  templateUrl: "./hero-detail.component.html",
  styleUrls: ["./hero-detail.component.css"],
})
export class HeroDetailComponent implements OnInit {
  @Input() hero?: Hero;

  constructor() {}

  ngOnInit() {}
}

export class SizerComponent {
  @Input() size!: number | string;
  @Output() sizeChange = new EventEmitter();

  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(
      40,
      Math.max(8, +this.size + delta)
    );
    this.sizeChange.emit(this.size);
  }
}

@Component({
  selector: "app-hero-bio",
  template: ` 
{{ hero.name }}
    
    `,
  providers: [HeroCacheService],
})
export class HeroBioComponent implements OnInit {
  @Input() heroId = 0;

  constructor(private heroCache: HeroCacheService) {}

  ngOnInit() {
    this.heroCache.fetchCachedHero(this.heroId);
  }

  get hero() {
    return this.heroCache.hero;
  }
}

@Component({
  selector: 'app-typical',
  template: '
A typical component for {{data.name}}
'
})
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { ... }
}

@Input() hero?: Hero;

@Component({
  selector: "app-hero",
  template: "
{{hero.name}}
",
})
export class HeroComponent {
  @Input() hero: Hero;
}

export class AdBannerComponent
  implements OnInit, OnDestroy
{
  @Input() ads: AdItem[] = [];
  currentAdIndex = -1;
  @ViewChild(AdDirective, { static: true })
  adHost!: AdDirective;
  interval: number | undefined;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    this.loadComponent();
    this.getAds();
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  loadComponent() {
    this.currentAdIndex =
      (this.currentAdIndex + 1) % this.ads.length;
    const adItem = this.ads[this.currentAdIndex];

    const componentFactory =
      this.componentFactoryResolver.resolveComponentFactory(
        adItem.component
      );

    const viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    const componentRef =
      viewContainerRef.createComponent(
        componentFactory
      );
    componentRef.instance.data = adItem.data;
  }

  getAds() {
    this.interval = setInterval(() => {
      this.loadComponent();
    }, 3000);
  }
}

@Input() defaultColor = '';

@Component(...)
class MyDialog {
  @Input() content: string;
}

import {
  Directive,
  Input,
  TemplateRef,
  ViewContainerRef,
} from "@angular/core";

/**
 * Add the template content to the DOM unless the condition is true.
 */
@Directive({ selector: "[appUnless]" })
export class UnlessDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(
        this.templateRef
      );
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

import { render, fireEvent } from "@testing-library/vue";
import Component from "./Component.vue";

test("properly handles v-model", async () => {
  const { getByLabelText, getByText } = render(Component);

  // Asserts initial state.
  getByText("Hi, my name is Alice");

  // Get the input DOM node by querying the associated label.
  const usernameInput = getByLabelText(/username/i);

  // Updates the  value and triggers an `input` event.
  // fireEvent.input() would make the test fail.
  await fireEvent.update(usernameInput, "Bob");

  getByText("Hi, my name is Bob");
});