add stopPropagation & preventDefault directives

src/index.ts

@@ -21,3 +21,4 @@ export * from './lib/users';
 export * from './lib/translations';
 export * from './lib/pipes';
 export * from './lib/permissions';
+export * from './lib/directives';

src/lib/common-ui.module.ts

@@ -4,7 +4,7 @@ import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils';
-import { HiddenActionComponent, ToastComponent } from './shared';
+import { ToastComponent } from './shared';
 import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
 import { IqserListingModule } from './listing';
 import { IqserFiltersModule } from './filtering';
@@ -33,7 +33,7 @@ const matModules = [
     MatProgressBarModule,
 ];
 const modules = [IqserListingModule, IqserFiltersModule, IqserInputsModule, IqserScrollbarModule, HttpClientModule];
-const components = [ConnectionStatusComponent, FullPageErrorComponent, HiddenActionComponent, ConfirmationDialogComponent, ToastComponent];
+const components = [ConnectionStatusComponent, FullPageErrorComponent, ConfirmationDialogComponent, ToastComponent];
 
 @NgModule({
     declarations: [...components],

src/lib/directives/hidden-action.directive.ts

@@ -0,0 +1,46 @@
+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+@Directive({
+    selector: '[iqserHiddenAction]',
+    standalone: true,
+})
+export class HiddenActionDirective {
+    @Input() requiredClicks = 4;
+    @Output() readonly iqserHiddenAction = new EventEmitter();
+
+    #dPressed = false;
+    #clickCount = 0;
+    #clickCountTimeout?: ReturnType<typeof setTimeout>;
+
+    @HostListener('window:keydown.D')
+    onKeydownD() {
+        this.#dPressed = true;
+    }
+
+    @HostListener('window:keyup.D')
+    onKeyupD() {
+        this.#dPressed = false;
+    }
+
+    @HostListener('click', ['$event'])
+    countActions($event: MouseEvent): void {
+        if (!this.#dPressed) {
+            this.#clickCount = 0;
+            clearTimeout(this.#clickCountTimeout);
+            return;
+        }
+
+        $event.stopPropagation();
+        $event.preventDefault();
+
+        this.#clickCount += 1;
+
+        if (this.#clickCount === this.requiredClicks) {
+            this.#clickCount = 0;
+            this.iqserHiddenAction.emit();
+        }
+
+        clearTimeout(this.#clickCountTimeout);
+        this.#clickCountTimeout = setTimeout(() => (this.#clickCount = 0), 1000);
+    }
+}

src/lib/directives/index.ts

@@ -0,0 +1,3 @@
+export * from './hidden-action.directive';
+export * from './stop-propagation.directive';
+export * from './prevent-default.directive';

src/lib/directives/prevent-default.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[preventDefault]',
+    standalone: true,
+})
+export class PreventDefaultDirective {
+    @HostListener('click', ['$event'])
+    onClick($event: Event) {
+        $event.preventDefault();
+    }
+}

src/lib/directives/stop-propagation.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[stopPropagation]',
+    standalone: true,
+})
+export class StopPropagationDirective {
+    @HostListener('click', ['$event'])
+    onClick($event: Event) {
+        $event.stopPropagation();
+    }
+}

src/lib/shared/hidden-action/hidden-action.component.html

@@ -1,3 +0,0 @@
-<div (click)="countActions($event)">
-    <ng-content></ng-content>
-</div>

src/lib/shared/hidden-action/hidden-action.component.ts

@@ -1,46 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Component({
-    selector: 'iqser-hidden-action',
-    templateUrl: './hidden-action.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HiddenActionComponent {
-    @Input() requiredClicks = 4;
-    @Output() readonly action = new EventEmitter();
-    #dPressed = new BehaviorSubject(false);
-    #clickCount = 0;
-    #clickCountTimeout?: ReturnType<typeof setTimeout>;
-
-    @HostListener('window:keydown.D', ['$event'])
-    onKeydownD() {
-        this.#dPressed.next(true);
-    }
-
-    @HostListener('window:keyup.D', ['$event'])
-    onKeyupD() {
-        this.#dPressed.next(false);
-    }
-
-    countActions($event: MouseEvent): void {
-        if (!this.#dPressed.value) {
-            this.#clickCount = 0;
-            clearTimeout(this.#clickCountTimeout);
-            return;
-        }
-
-        $event.stopPropagation();
-        $event.preventDefault();
-
-        this.#clickCount += 1;
-        if (this.#clickCount === this.requiredClicks) {
-            this.#clickCount = 0;
-            this.action.emit();
-        }
-        clearTimeout(this.#clickCountTimeout);
-        this.#clickCountTimeout = setTimeout(() => {
-            this.#clickCount = 0;
-        }, 1000);
-    }
-}

src/lib/shared/index.ts

@@ -1,4 +1,3 @@
-export * from './hidden-action/hidden-action.component';
 export * from './logo/logo.component';
 export * from './side-nav/side-nav.component';
 export * from './status-bar/status-bar.component';