Rewrite suggestion

src/components/swipe-cards/shared/components/card.component.css

@@ -0,0 +1,62 @@
+.card-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+:host {
+  transition: transform 1s ease;
+  position: absolute;
+  border-radius: 2px;
+  border: 1px solid white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+  transition: transform 0.2s ease;
+  background-color: white;
+  touch-action: none !important;
+}
+
+:host(.card-heap) {
+  transition: transform 1s ease;
+  display: block;
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
+  transform: perspective(400px) translate3d(0, 30px, -30px);
+  visibility: hidden;
+}
+
+:host(.card-heap):nth-child(1) {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+  z-index:3;
+  visibility: visible;
+  transform: perspective(400px) translate3d(0, 0px, 0px);
+}
+
+:host(.card-heap):nth-child(2) {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+  z-index:2;
+  visibility: visible;
+  transform: perspective(400px) translate3d(0, 30px, -30px);
+}
+
+:host(.card-heap):nth-child(3) {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+  z-index:1;
+  visibility: visible;
+  transform: perspective(400px) translate3d(0, 60px, -60px);
+}
+
+:host .card-overlay {
+  transform: translateZ(0);
+  opacity: 0;
+  border-radius: 2px;
+  position: absolute;
+  width: 100%;
+  height: 10px;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: white;
+}

src/components/swipe-cards/shared/components/card.component.html

@@ -0,0 +1,4 @@
+<div class="card-wrapper">
+  <ng-content></ng-content>
+  <div #overlay class="card-overlay"></div>
+</div>

src/components/swipe-cards/shared/components/card.component.ts

@@ -0,0 +1,255 @@
+import {
+  AfterViewChecked,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild
+} from '@angular/core';
+
+import {Subscription} from 'rxjs/Subscription';
+import 'rxjs/add/operator/filter';
+
+import {SwipeCardsApi} from '@components/swipe-cards/shared/services/swipe-cards-api.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class CardComponent implements AfterViewChecked, OnInit, OnDestroy {
+  @Input() card: any;
+  @Input() cardElement: any;
+  @Input() position: number;
+  @Input() beforeSwipeAction: (event: any) => boolean;
+
+  @Input() set config(config) {
+
+    if (config) {
+      this._config = config;
+    }
+  }
+
+  @Input() set orientation(value: string) {
+    this._orientation = value || 'xy';
+  }
+
+  get config() {
+    return this._config;
+  }
+
+  get orientation() {
+    return this._orientation;
+  }
+
+  @Output() onLike: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onDislike: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onRelease: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onSwipe: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onAbort: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onDisallowed: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onSpecial: EventEmitter<any> = new EventEmitter<any>();
+  @Output() removeCard: EventEmitter<any> = new EventEmitter<any>();
+  @ViewChild('overlay') overlay: ElementRef;
+
+  public releaseRadius: any;
+  public released: Boolean = false;
+  public element: HTMLElement;
+
+  public direction: any = {
+    x: 0,
+    y: 0
+  };
+
+  private _config: any;
+  private _orientation = 'xy';
+
+  private swipeActionSubscription: Subscription;
+
+  @HostBinding('class.card-heap') isCardHeapClass = true;
+
+  @HostListener('pan', ['$event'])
+  onPan(event: any) {
+
+    if (!this.config.fixed && !this.released && this.position === 0) {
+      this.onSwipeCb(event);
+    }
+  }
+
+  @HostListener('panend', ['$event'])
+  onPanEnd(event: any) {
+
+    if (!this.config.fixed && !this.released && this.position === 0) {
+
+      if ((this._orientation === 'x' && (this.releaseRadius.x < event.deltaX || this.releaseRadius.x * -1 > event.deltaX)) || (this._orientation === 'y' && (this.releaseRadius.y < event.deltaY || this.releaseRadius.y * -1 > event.deltaY)) || ((this.releaseRadius.x < event.deltaX || this.releaseRadius.x * -1 > event.deltaX) || (this.releaseRadius.y < event.deltaY || this.releaseRadius.y * -1 > event.deltaY))) {
+        this.onReleaseCb(event);
+      }
+      else {
+        this.onAbortCb(event);
+      }
+    }
+  }
+
+  constructor(
+    private cd: ChangeDetectorRef,
+    protected el: ElementRef,
+    private renderer: Renderer2,
+    private swipeCardsApi: SwipeCardsApi
+  ) {}
+
+  ngOnInit() {
+
+    this.element = this.el.nativeElement;
+
+    this.swipeActionSubscription = this.swipeCardsApi.swipeAction$
+      .filter(() => this.position === 0)
+      .subscribe((options: any) => {
+
+        if (this.beforeSwipeAction) {
+
+          const canProceedWithAction: boolean = this.beforeSwipeAction({action: options.action, card: this.card});
+
+          if (canProceedWithAction) {
+            this.onAction(options.action, options.direction);
+          }
+          else {
+            this.onDisallowed.emit({action: options.action, card: this.card});
+          }
+        }
+        else {
+          this.onAction(options.action, options.direction);
+        }
+      }
+    );
+  }
+
+  ngAfterViewChecked() {
+
+    if (this.element.parentElement) {
+
+      const height = this.element.parentElement.clientHeight;
+      const width = this.element.parentElement.clientWidth;
+
+      this.renderer.setStyle(this.element, 'height', height + 'px');
+      this.renderer.setStyle(this.element, 'width', width + 'px');
+
+      this.releaseRadius = {
+        x: width / 4,
+        y: height / 4
+      };
+    }
+  }
+
+  ngOnDestroy() {
+    this.swipeActionSubscription.unsubscribe();
+  }
+
+  translate(params: any) {
+
+    if (!this.config.fixed) {
+      this.renderer.setStyle(this.element, 'transition', 'transform ' + (params.time || 0) + 's ease');
+      this.renderer.setStyle(this.element, 'webkitTransform', `translate3d(${(params.x && (!this._orientation || this._orientation.indexOf('x') !== -1) ? (params.x) : 0)}px, ${(params.y && (!this._orientation || this._orientation.indexOf('y') !== -1) ? (params.y) : 0)}px, 0) rotate(${params.rotate || 0}deg)`);
+    }
+  }
+
+  onSwipeCb(event: any) {
+
+    const like = (this.orientation === 'y' && event.deltaY < 0) || (this.orientation !== 'y' && event.deltaX > 0);
+    const opacity = (event.distance < 0 ? event.distance * -1 : event.distance) * 0.5 / this.element.offsetWidth;
+
+    if (!!this.config.overlay) {
+
+      this.renderer.setStyle(this.overlay.nativeElement, 'transition', 'opacity 0s ease');
+      this.renderer.setStyle(this.overlay.nativeElement, 'opacity', opacity.toString());
+      this.renderer.setStyle(this.overlay.nativeElement, 'background-color', this.config.overlay[like ? 'like' : 'dislike'].backgroundColor);
+    }
+
+    this.translate({
+      x: event.deltaX,
+      y: event.deltaY,
+      rotate: ((event.deltaX * 20) / this.element.clientWidth)
+    });
+
+    this.onSwipe.emit(event);
+  }
+
+  onAbortCb(event: any): void {
+
+    if (!!this.config.overlay) {
+      this.renderer.setStyle(this.overlay.nativeElement, 'transition', 'opacity 0.2s ease');
+      this.renderer.setStyle(this.overlay.nativeElement, 'opacity', '0');
+    }
+
+    this.translate({
+      x: 0,
+      y: 0,
+      rotate: 0,
+      time: 0.2
+    });
+
+    this.onAbort.emit(event);
+  }
+
+  onReleaseCb(event: any): void {
+
+    this.released = true;
+
+    const like = (this.orientation === 'y' && event.deltaY < 0) || (this.orientation !== 'y' && event.deltaX > 0);
+
+    if (this.beforeSwipeAction) {
+
+      const canProceedWithAction: boolean = this.beforeSwipeAction({action: like ? 'like' : 'dislike', card: this.card});
+
+      if (canProceedWithAction) {
+        this.onAction(like ? 'like' : 'dislike', like ? 'right' : 'left');
+      }
+      else {
+        this.onDisallowed.emit({action: like ? 'like' : 'dislike', card: this.card});
+      }
+    }
+    else {
+      this.onAction(like ? 'like' : 'dislike', like ? 'right' : 'left');
+    }
+
+    this.onRelease.emit(event);
+  }
+
+  onAction(action: string, direction: string): void {
+
+    const el = this.element;
+    const x = (el.offsetWidth + el.clientWidth) * (direction === 'right' ? 1 : -1);
+    const y = (el.offsetHeight + el.clientHeight) * (direction === 'right' ? -1 : 1);
+
+    this.translate({
+      x: x,
+      y: y,
+      rotate: (x * 20) / el.clientWidth,
+      time: 0.8
+    });
+
+    this.renderer.setStyle(this.overlay.nativeElement, 'transition', 'opacity 0.4s ease');
+    this.renderer.setStyle(this.overlay.nativeElement, 'opacity', '0.5');
+    this.renderer.setStyle(this.overlay.nativeElement, 'background-color', this.config.overlay[action].backgroundColor);
+
+    switch (action) {
+      case 'like': this.onLike.emit({like: true, card: this.card}); break;
+      case 'dislike': this.onDislike.emit({like: false, card: this.card}); break;
+      case 'special': this.onSpecial.emit({special: true, card: this.card}); break;
+    }
+
+    setTimeout(() => {
+      this.removeCard.emit(this.card);
+    }, 200);
+  }
+}

src/components/swipe-cards/shared/components/card.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {CardComponent} from './card.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    CardComponent
+  ],
+  declarations: [
+    CardComponent
+  ]
+})
+
+export class CardModule {}

src/components/swipe-cards/shared/directives/action.directive.ts

@@ -0,0 +1,25 @@
+import {Directive, Input, HostListener} from '@angular/core';
+
+import {SwipeCardsApi} from '@components/swipe-cards/shared/services/swipe-cards-api.service';
+
+@Directive({
+  selector: '[swipeCardsAction]'
+})
+
+export class ActionDirective {
+  @Input() action: string;
+  @Input() direction: string;
+  @Input() beforeSwipeAction: () => boolean;
+
+  constructor(private swipeCardsApi: SwipeCardsApi) {}
+
+  @HostListener('click')
+  swipeCard(): void {
+
+    this.swipeCardsApi.swipe({
+      action: this.action,
+      beforeSwipeAction: this.beforeSwipeAction,
+      direction: this.direction
+    });
+  }
+}