Hidden action

src/lib/common-ui.module.ts

@@ -18,6 +18,7 @@ import { IqserScrollbarModule } from './scrollbar';
 import { IqserEmptyStatesModule } from './empty-states';
 import { LogPipe } from './utils/pipes/log.pipe';
 import { LogoComponent } from './misc/logo/logo.component';
+import { HiddenActionComponent } from './misc/hidden-action/hidden-action.component';
 
 const matModules = [MatIconModule, MatProgressSpinnerModule];
 const modules = [
@@ -31,7 +32,7 @@ const modules = [
     IqserScrollbarModule,
     IqserEmptyStatesModule
 ];
-const components = [StatusBarComponent, FullPageLoadingIndicatorComponent, FullPageErrorComponent, LogoComponent];
+const components = [StatusBarComponent, FullPageLoadingIndicatorComponent, FullPageErrorComponent, LogoComponent, HiddenActionComponent];
 const pipes = [SortByPipe, HumanizePipe];
 
 @NgModule({

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

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

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

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'iqser-hidden-action',
+    templateUrl: './hidden-action.component.html',
+    styleUrls: ['./hidden-action.component.scss']
+})
+export class HiddenActionComponent {
+    @Input() requiredClicks = 4;
+    @Output() readonly action = new EventEmitter();
+    private _clickCount = 0;
+    private _clickCountTimeout?: ReturnType<typeof setTimeout>;
+
+    countActions(): void {
+        this._clickCount += 1;
+        if (this._clickCount === this.requiredClicks) {
+            this._clickCount = 0;
+            this.action.emit();
+        }
+        clearTimeout(this._clickCountTimeout);
+        this._clickCountTimeout = setTimeout(() => {
+            this._clickCount = 0;
+        }, 1000);
+    }
+}