@Component({
  selector: "svg[lineChart]",
  templateUrl: "./line-chart.template.html",
  styleUrls: ["./line-chart.style.less"],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    preserveAspectRatio: "none"
  }
})
export class LineChartComponent {}

@HostBinding('attr.viewBox')
  get viewBox(): string {
    return `${this.x} ${this.y} ${this.width} ${this.height}`;
  }

<svg:path
  fill="none"
  stroke="currentColor"
  vector-effect="non-scaling-stroke"
  stroke-width="2"
  [attr.d]="d"
/>

get d(): string {
    return this.data.reduce(
      (d, point, index) =>
        index ? `${d} ${draw(this.data, index, this.smoothing)}` : `M ${point}`,
      ""
    );
  }

@Input()
  currentTime = 0;
  @Input()
  paused = true;
  @Input()
  @HostBinding("volume")
  volume = 1;
  @Output()
  readonly currentTimeChange = new EventEmitter<number>();
  @Output()
  readonly pausedChange = new EventEmitter<boolean>();
  @Output()
  readonly volumeChange = new EventEmitter<number>();
  @HostListener("volumechange")
  onVolumeChange() {
    this.volume = this.elementRef.nativeElement.volume;
    this.volumeChange.emit(this.volume);
  }

@Input()
  set currentTime(currentTime: number) {
    if (currentTime !== this.currentTime) {
      this.elementRef.nativeElement.currentTime = currentTime;
    }
  }
  get currentTime(): number {
    return this.elementRef.nativeElement.currentTime;
  }
  @HostListener("timeupdate")
  @HostListener("seeking")
  @HostListener("seeked")
  onCurrentTimeChange() {
    this.currentTimeChange.emit(this.currentTime);
  }

@Input()
  set paused(paused: boolean) {
    if (paused) {
      this.elementRef.nativeElement.pause();
    } else {
      this.elementRef.nativeElement.play();
    }
  }
  get paused(): boolean {
    return this.elementRef.nativeElement.paused;
  }

<video
  #video
  media
  class="video"
  [(currentTime)]="currentTime"
  [(paused)]="paused"
  (click)="toggleState()"
>
  <ng-content></ng-content>
</video>
<div class="controls">
  <button
    class="button"
    type="button"
    title="Play/Pause"
    (click)="toggleState()"
  >
    {{icon}}
  </button>
  <input
    class="progress"
    type="range"
    [max]="video.duration"
    [(ngModel)]="currentTime"
  />
</div>

currentTime = 0;
  paused = true;
  get icon(): string {
    return this.paused ? "\u23F5" : "\u23F8";
  }
  toggleState() {
    this.paused = !this.paused;
  }

<combo-box [items]="items">
  <input type="text" [(ngModel)]="value">
</combo-box>

<label>
  <ng-content></ng-content>
  <div class="toggle" (mousedown.prevent)="toggle()"></div>
</label>
<div *ngIf="open" class="list" (mousedown.prevent)="noop()">
  <div
    *ngFor="let item of filteredItems; let index = index"
    class="item"
    [class.item_active]="isActive(index)"
    (click)="onClick(item)"
    (mouseenter)="onMouseEnter(index)"
  >
    {{item}}
  </div>
</div>

get open(): boolean {
    return !isNaN(this.index);
  }

@ContentChild(NgControl)
  private readonly control: NgControl;
  get value(): string {
    return String(this.control.value);
  }
  get filteredItems(): readonly string[] {
    return this.items.filter(item =>
      item.toLowerCase().includes(this.value.toLowerCase())
    );
  }

get clampedIndex(): number {
    return limit(this.index, this.filteredItems.length - 1);
  }
// ...
function limit(value: number, max: number): number {
  return Math.max(Math.min(value || 0, max), 0);
}

onClick(item: string) {
    this.selectItem(item);
  }
  onMouseEnter(index: number) {
    this.index = index;
  }
  @HostListener('keydown.esc')
  @HostListener('focusout')
  close() {
    this.index = NaN;
  }
  toggle() {
    this.index = this.open ? NaN : 0;
  }
  private selectItem(value: string) {
    this.control.control.setValue(value);
    this.close();
  }

@HostListener('keydown.arrowDown.prevent', ['1'])
  @HostListener('keydown.arrowUp.prevent', ['-1'])
  onArrow(delta: number) {
    this.index = this.open
      ? limit(
        this.clampedIndex + delta,
        this.filteredItems.length - 1
      )
      : 0;
  }
  @HostListener('keydown.enter.prevent')
  onEnter() {
    this.selectItem(
      this.open
        ? this.filteredItems[this.clampedIndex]
        : this.value
    )
  }
  @HostListener('input')
  onInput() {
    this.index = this.clampedIndex;
  }

export function Pure<T>(
  _target: Object,
  propertyKey: string,
  { enumerable, value }: TypedPropertyDescriptor<T>
): TypedPropertyDescriptor<T> {
  const original = value;
  return {
    enumerable,
    get(): T {
      let previousArgs: ReadonlyArray<unknown> = [];
      let previousResult: any;
      const patched = (...args: Array<unknown>) => {
        if (
          previousArgs.length === args.length &&
          args.every((arg, index) => arg === previousArgs[index])
        ) {
          return previousResult;
        }
        previousArgs = args;
        previousResult = original(...args);
        return previousResult;
      };
      Object.defineProperty(this, propertyKey, {
        value: patched
      });
      return patched as any;
    }
  };
}

get filteredItems(): readonly string[] {
    return this.filter(this.items, this.value);
  }
  @Pure
  private filter(items: readonly string[], value: string): readonly string[] {
    return items.filter(item =>
      item.toLowerCase().includes(value.toLowerCase())
    );
  }