first commit

src/app/_directives/card.directive.ts

@@ -0,0 +1,30 @@
+import {
+  Directive,
+  AfterViewInit,
+  OnDestroy,
+  ElementRef,
+  OnInit,
+  Input,
+  HostBinding
+} from '@angular/core';
+
+interface CardOptions {
+  enableSticky?: boolean;
+  headOverlay?: boolean;
+  headLarge?: boolean;
+  class?: string[];
+}
+
+@Directive({
+  selector: '[mCard]'
+})
+export class CardDirective {
+  card: any;
+
+  @Input() options: CardOptions;
+  @HostBinding('class') class: any;
+
+  constructor(private el: ElementRef) {
+    this.class = this.el.nativeElement.classList;
+  }
+}

src/app/_directives/image.preload.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, Input, HostBinding } from '@angular/core'
+/* eslint-disable @angular-eslint/no-host-metadata-property */
+/* eslint-disable @angular-eslint/directive-selector */
+@Directive({
+  selector: 'img[default]',
+  host: {
+    '(error)': 'updateUrl()',
+    '(load)': 'load()',
+    '[src]': 'src'
+  }
+})
+export class ImagePreloadDirective {
+  @Input() src: string;
+  @Input() default: string;
+  @HostBinding('class') className;
+
+  updateUrl() {
+    this.src = this.default;
+  }
+  load() {
+    this.className = 'image-loaded';
+  }
+}

src/app/_directives/match-height.directive.ts

@@ -0,0 +1,64 @@
+import { Directive, ElementRef, Input, HostListener, AfterViewInit } from '@angular/core';
+/* eslint-disable @angular-eslint/directive-selector */
+@Directive({
+  selector: '[matchHeight]'
+})
+export class MatchHeightDirective implements AfterViewInit {
+  // class name to match height
+  @Input()
+  matchHeight: string;
+
+  constructor(private el: ElementRef) {}
+
+  ngAfterViewInit() {
+    // call our matchHeight function here
+    setTimeout(() => {
+      this.matchHeights(this.el.nativeElement, this.matchHeight);
+    }, 700);
+  }
+
+  matchHeights(parent: HTMLElement, className: string) {
+    if (!parent) {
+      return;
+    }
+
+    // step 1: find all the child elements with the selected class name
+    const children = parent.getElementsByClassName(className);
+
+    if (!children) {
+      return;
+    }
+
+    // Match hight - fix --- comment below code
+    Array.from(children).forEach((x: HTMLElement) => {
+      x.style.height = 'initial';
+    });
+
+    // step 2a: get all the child elements heights
+    const itemHeights = Array.from(children).map(
+      x => x.getBoundingClientRect().height
+    );
+
+    // step 2b: find out the tallest
+    const maxHeight = itemHeights.reduce((prev, curr) => {
+      return curr > prev ? curr : prev;
+    }, 0);
+
+    // step 3: update all the child elements to the tallest height
+    if (window.innerWidth > 1200) {
+      Array.from(children).forEach(
+        (x: HTMLElement) => (x.style.height = `${maxHeight}px`)
+      );
+    } else if (window.innerWidth < 1199) {
+      Array.from(children).forEach(
+        (x: HTMLElement) => (x.style.height = `initial`)
+      );
+    }
+  }
+
+  @HostListener('window:resize')
+  onResize() {
+    // call our matchHeight function here
+    this.matchHeights(this.el.nativeElement, this.matchHeight);
+  }
+}

src/app/_directives/sortable.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+export type SortDirection = 'asc' | 'desc' | '';
+const rotate: { [key: string]: SortDirection } = {
+  asc: 'desc',
+  desc: '',
+  '': 'asc'
+};
+
+export interface SortEvent {
+  column: string;
+  direction: SortDirection;
+}
+/* eslint-disable @angular-eslint/directive-selector */
+/* eslint-disable @angular-eslint/no-host-metadata-property */
+/* eslint-disable @angular-eslint/directive-class-suffix */
+@Directive({
+  selector: 'th[sortable]',
+  host: {
+    '[class.asc]': 'direction === "asc"',
+    '[class.desc]': 'direction === "desc"',
+    '(click)': 'rotate()'
+  }
+})
+export class NgbdSortableHeader {
+  @Input() sortable: string;
+  @Input() direction: SortDirection = '';
+  @Output() sort = new EventEmitter<SortEvent>();
+
+  rotate() {
+    this.direction = rotate[this.direction];
+    this.sort.emit({ column: this.sortable, direction: this.direction });
+  }
+}