feature(core): add event modifier directives

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],

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);
+      });
+  }
+}

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);
+    });
+  }
+}