2 files changed, 66 insertions, 0 deletions
diff --git a/src/angular/animations/animation-directives.module.ts b/src/angular/animations/animation-directives.module.ts
new file mode 100644
index 0000000..c6a8203
--- /dev/null
+++ b/src/angular/animations/animation-directives.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { RippleClickAnimationDirective } from "./ripple-click.animation.directive";
+import { CommonModule } from "@angular/common";
+
+@NgModule({
+    declarations: [
+        RippleClickAnimationDirective
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        RippleClickAnimationDirective
+
+    ],
+})
+export class AnimationDirectivesModule {
+
+}
diff --git a/src/angular/animations/ripple-click.animation.directive.ts b/src/angular/animations/ripple-click.animation.directive.ts
new file mode 100644
index 0000000..7b9ed55
--- /dev/null
+++ b/src/angular/animations/ripple-click.animation.directive.ts
@@ -0,0 +1,47 @@
+import { Directive, Input, HostBinding, HostListener } from "@angular/core";
+
+export enum RippleAnimationAction {
+    CLICK = 0,
+    MOUSE_ENTER = 1
+};
+
+@Directive({
+    selector: `[SdcRippleClickAnimation]`
+})
+export class RippleClickAnimationDirective {
+    private animated: boolean;
+
+    @Input() rippleClickDisabled: boolean;
+    @Input() rippleOnAction:RippleAnimationAction = RippleAnimationAction.CLICK;
+
+    @HostBinding('class.sdc-ripple-click__animated') animationClass: string;
+
+    @HostListener('click') onClick() {
+        if(this.rippleOnAction === RippleAnimationAction.CLICK){
+            this.animateStart();
+        }
+    }
+
+    @HostListener('mouseenter') onMouseEnter() {
+        //console.log("Mouseenter!", this.rippleOnAction);
+        if(this.rippleOnAction === RippleAnimationAction.MOUSE_ENTER){
+            this.animateStart();
+        }
+    }
+
+    private animateStart():void{
+        if (!this.rippleClickDisabled) {
+            this.animated = true;
+            this.animationClass = 'sdc-ripple-click__animated';
+        }
+    }
+    @HostListener('animationend') onAnimationComplete() {
+        this.animated = false;
+        this.animationClass = '';
+    }
+
+    constructor() {
+        this.rippleClickDisabled = false;
+        this.animated = false;
+    }
+}