From 3e0524d3902d64a64cf5a1f6fd754059d95c7cd4 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Wed, 7 Aug 2019 11:25:10 +0300
Subject: [PATCH] feature(core): add event modifier directives

---
 .../packages/core/src/lib/core.module.ts      |  6 +++++
 .../src/lib/directives/debounce.directive.ts  | 26 +++++++++++++++++++
 .../directives/stop-propagation.directive.ts  | 18 +++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
 create mode 100644 npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts

diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts
index 9e822a4823..79ecf7f1f8 100644
--- a/npm/ng-packs/packages/core/src/lib/core.module.ts
+++ b/npm/ng-packs/packages/core/src/lib/core.module.ts
@@ -20,6 +20,8 @@ import { SessionState } from './states/session.state';
 import { getInitialData } from './utils/initial-utils';
 import { EllipsisDirective } from './directives/ellipsis.directive';
 import { AutofocusDirective } from './directives/autofocus.directive';
+import { DebounceDirective } from './directives/debounce.directive';
+import { StopPropagationDirective } from './directives/stop-propagation.directive';
 
 @NgModule({
   imports: [
@@ -40,6 +42,8 @@ import { AutofocusDirective } from './directives/autofocus.directive';
     LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
+    DebounceDirective,
+    StopPropagationDirective,
   ],
   exports: [
     CommonModule,
@@ -54,7 +58,9 @@ import { AutofocusDirective } from './directives/autofocus.directive';
     LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
+    DebounceDirective,
     LocalizationPipe,
+    StopPropagationDirective,
   ],
   providers: [LocalizationPipe],
   entryComponents: [RouterOutletComponent, DynamicLayoutComponent],
diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
new file mode 100644
index 0000000000..55e8c23c92
--- /dev/null
+++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
@@ -0,0 +1,26 @@
+import { Directive, Output, Renderer2, ElementRef, OnInit, EventEmitter, Input } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { takeUntilDestroy } from '@ngx-validate/core';
+
+@Directive({
+  selector: '[input.debounce]',
+})
+export class DebounceDirective implements OnInit {
+  @Input() debounce: number = 300;
+
+  @Output('input.debounce') debounceEvent = new EventEmitter<Event>();
+
+  constructor(private renderer: Renderer2, private el: ElementRef) {}
+
+  ngOnInit(): void {
+    fromEvent(this.el.nativeElement, 'input')
+      .pipe(
+        debounceTime(this.debounce),
+        takeUntilDestroy(this),
+      )
+      .subscribe((event: Event) => {
+        this.debounceEvent.emit(event);
+      });
+  }
+}
diff --git a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts
new file mode 100644
index 0000000000..f2f6ac0384
--- /dev/null
+++ b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts
@@ -0,0 +1,18 @@
+import { Directive, ElementRef, EventEmitter, OnInit, Output, Renderer2 } from '@angular/core';
+import { fromEvent } from 'rxjs';
+
+@Directive({
+  selector: '[click.stop]',
+})
+export class StopPropagationDirective implements OnInit {
+  @Output('click.stop') stopPropEvent = new EventEmitter<MouseEvent>();
+
+  constructor(private renderer: Renderer2, private el: ElementRef) {}
+
+  ngOnInit(): void {
+    fromEvent(this.el.nativeElement, 'click').subscribe((event: MouseEvent) => {
+      event.stopPropagation();
+      this.stopPropEvent.emit(event);
+    });
+  }
+}