Cancel and close with escape key

projects/admin-core/src/lib/application/application-create/application-create.component.html

@@ -4,5 +4,5 @@ <h2 class="page-details-title" i18n="@@admin-core.application.create-application
 </div>
 <div class="page-details-actions">
   <tm-admin-save-button label="Create" i18n-label="@@admin-core.common.create" [saving$]="saving$" [disabled]="!applicationCreateModel || !formValid" (save)="save()"></tm-admin-save-button>
-  <button mat-flat-button routerLink="/admin/applications" i18n="@@admin-core.common.cancel">Cancel</button>
+  <button mat-flat-button tmCancelCloseButton routerLink="/admin/applications" i18n="@@admin-core.common.cancel">Cancel</button>
 </div>

projects/admin-core/src/lib/application/application-edit-filters/filter-group-create/application-create-filter-group.component.html

@@ -21,7 +21,11 @@
     </mat-selection-list>
     <div class="page-details-actions">
       <tm-admin-save-button label="Create" i18n-label="@@admin-core.common.create" [disabled]="!saveEnabled()" (save)="save()"></tm-admin-save-button>
-      <button mat-flat-button [routerLink]="'/admin/applications/application/' + applicationId() + '/filters'" i18n="@@admin-core.common.cancel">Cancel</button>
+      <button
+        mat-flat-button
+        tmCancelCloseButton
+        [routerLink]="'/admin/applications/application/' + applicationId() + '/filters'"
+        i18n="@@admin-core.common.cancel">Cancel</button>
     </div>
   </div>
 </div>

projects/admin-core/src/lib/application/application-edit/application-edit.component.html

@@ -27,7 +27,7 @@ <h2 class="page-details-title" i18n="@@admin-core.application.edit">Edit {{ appl
   <div class="page-details-actions application-edit-buttons">
     <tm-admin-save-button [saving$]="saving$" [disabled]="(canSave$ | async) === false" (save)="save()"></tm-admin-save-button>
     <button mat-flat-button color="warn" (click)="delete(application)" i18n="@@admin-core.common.delete">Delete</button>
-    <button mat-flat-button routerLink="/admin/applications" i18n="@@admin-core.common.close">Close</button>
+    <button mat-flat-button tmCancelCloseButton routerLink="/admin/applications" i18n="@@admin-core.common.close">Close</button>
     <tm-spinner-button [showSpinner$]="makingCopy$"
       label="Copy"
       color="accent"

projects/admin-core/src/lib/form/form-create/form-create.component.html

@@ -4,5 +4,5 @@ <h2 class="page-details-title" i18n="@@admin-core.form.create-form">Create form<
 </div>
 <div class="page-details-actions">
   <tm-admin-save-button label="Create" i18n-label="@@admin-core.common.create" [saving$]="saving$" [disabled]="!formCreateModel || !formValid" (save)="save()"></tm-admin-save-button>
-  <button mat-flat-button routerLink="/admin/forms" i18n="@@admin-core.common.cancel">Cancel</button>
+  <button mat-flat-button tmCancelCloseButton routerLink="/admin/forms" i18n="@@admin-core.common.cancel">Cancel</button>
 </div>

projects/admin-core/src/lib/form/form-edit/form-edit.component.html

@@ -18,6 +18,6 @@ <h2 class="page-details-title" i18n="@@admin-core.form.edit">Edit {{ form.name }
   <div class="page-details-actions application-edit-buttons">
     <tm-admin-save-button [saving$]="saving$" [disabled]="(canSave$ | async) === false" (save)="save()"></tm-admin-save-button>
     <button mat-flat-button color="warn" (click)="delete(form)" i18n="@@admin-core.common.delete">Delete</button>
-    <button mat-flat-button routerLink="/admin/forms" i18n="@@admin-core.common.close">Close</button>
+    <button mat-flat-button tmCancelCloseButton routerLink="/admin/forms" i18n="@@admin-core.common.close">Close</button>
   </div>
 }

projects/admin-core/src/lib/oidc/oidc-configuration-create/oidc-configuration-create.component.html

@@ -4,5 +4,5 @@ <h2 class="page-details-title" i18n="@@admin-core.oidc.create-configuration">Cre
 </div>
 <div class="page-details-actions">
   <tm-admin-save-button label="Create" i18n-label="@@admin-core.common.create" [saving$]="saving$" [disabled]="!oidcConfiguration" (save)="save()"></tm-admin-save-button>
-  <button mat-flat-button routerLink="/admin/settings/oidc-configurations" i18n="@@admin-core.common.cancel">Cancel</button>
+  <button mat-flat-button tmCancelCloseButton routerLink="/admin/settings/oidc-configurations" i18n="@@admin-core.common.cancel">Cancel</button>
 </div>

projects/admin-core/src/lib/oidc/oidc-configuration-edit/oidc-configuration-edit.component.html

@@ -35,6 +35,6 @@ <h4 i18n="@@admin-core.oidc.groups-header">OIDC roles mapped to groups</h4>
   <div class="page-details-actions oidcConfiguration-edit-buttons">
     <tm-admin-save-button [saving$]="saving$" [disabled]="draftOIDCConfigurationPristine$ | async" (save)="save()"></tm-admin-save-button>
     <button mat-flat-button color="warn" (click)="delete(oidcConfiguration)" i18n="@@admin-core.common.delete">Delete</button>
-    <button mat-flat-button routerLink="/admin/settings/oidc-configurations" i18n="@@admin-core.common.close">Close</button>
+    <button mat-flat-button tmCancelCloseButton routerLink="/admin/settings/oidc-configurations" i18n="@@admin-core.common.close">Close</button>
   </div>
 }

projects/admin-core/src/lib/search-index/search-index-edit/search-index-edit.component.html

@@ -41,6 +41,7 @@ <h2 class="page-details-title" i18n="@@admin-core.search-index.edit-search-index
             (click)="delete(searchIndex)"
             i18n="@@admin-core.common.delete">Delete</button>
     <button mat-flat-button
+            tmCancelCloseButton
             routerLink="/admin/search-indexes"
             i18n="@@admin-core.common.close">Close</button>
     <tm-spinner-button label="Re-index"

projects/admin-core/src/lib/user/group-create/group-create.component.html

@@ -4,5 +4,5 @@ <h2 class="page-details-title" i18n="@@admin-core.groups.add-group">Add group</h
 </div>
 <div class="page-details-actions">
   <tm-admin-save-button label="Create" i18n-label="@@admin-core.common.create" [saving$]="saving$" [disabled]="!group" (save)="save()"></tm-admin-save-button>
-  <button mat-flat-button routerLink="/admin/groups" i18n="@@admin-core.common.cancel">Cancel</button>
+  <button mat-flat-button tmCancelCloseButton routerLink="/admin/groups" i18n="@@admin-core.common.cancel">Cancel</button>
 </div>

projects/admin-core/src/lib/user/group-edit/group-edit.component.html

@@ -6,6 +6,6 @@ <h2 class="page-details-title" i18n="@@admin-core.groups.edit-group">Edit {{ gro
   <div class="page-details-actions application-edit-buttons">
     <tm-admin-save-button [saving$]="saving$" [disabled]="!updatedGroup" (save)="save()"></tm-admin-save-button>
     <button mat-flat-button color="warn" (click)="delete(group)" i18n="@@admin-core.common.delete">Delete</button>
-    <button mat-flat-button (click)="clearSelectedGroup()" routerLink="/admin/groups" i18n="@@admin-core.common.close">Close</button>
+    <button mat-flat-button tmCancelCloseButton (cancelClose)="clearSelectedGroup()" routerLink="/admin/groups" i18n="@@admin-core.common.close">Close</button>
   </div>
 }

projects/admin-core/src/lib/user/user-create/user-create.component.html

@@ -4,5 +4,5 @@ <h2 class="page-details-title" i18n="@@admin-core.users.add-user">Add user</h2>
 </div>
 <div class="page-details-actions">
   <tm-admin-save-button label="Create" i18n-label="@@admin-core.common.create" [saving$]="saving$" [disabled]="!user" (save)="save()"></tm-admin-save-button>
-  <button mat-flat-button routerLink="/admin/users" i18n="@@admin-core.common.cancel">Cancel</button>
+  <button mat-flat-button tmCancelCloseButton routerLink="/admin/users" i18n="@@admin-core.common.cancel">Cancel</button>
 </div>

projects/admin-core/src/lib/user/user-edit/user-edit.component.html

@@ -6,6 +6,11 @@ <h2 class="page-details-title" i18n="@@admin-core.users.edit-user">Edit {{ user.
   <div class="page-details-actions application-edit-buttons">
     <tm-admin-save-button [saving$]="saving$" [disabled]="!updatedUser" (save)="save()"></tm-admin-save-button>
     <button mat-flat-button color="warn" (click)="delete(user)" i18n="@@admin-core.common.delete">Delete</button>
-    <button mat-flat-button (click)="clearSelectedUser()" routerLink="/admin/users" i18n="@@admin-core.common.close">Close</button>
+    <button
+      mat-flat-button
+      tmCancelCloseButton
+      (cancelClose)="clearSelectedUser()"
+      routerLink="/admin/users"
+      i18n="@@admin-core.common.close">Close</button>
   </div>
 }

projects/shared/src/lib/components/color-picker/color-picker.component.ts

@@ -1,4 +1,6 @@
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Optional, Output, TemplateRef, ViewChild, inject } from '@angular/core';
+import {
+  Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Optional, Output, TemplateRef, ViewChild, inject, HostListener,
+} from '@angular/core';
 import { FormControl, ValidatorFn, Validators } from '@angular/forms';
 import { debounceTime, filter } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
@@ -92,6 +94,14 @@ export class ColorPickerComponent implements OnInit, OnDestroy {
   @Input()
   public dropdownPosition: PopoverPositionEnum | undefined;
 
+  @HostListener('document:keydown.escape', ['$event'])
+  public onEscapeOnOverlay(e: KeyboardEvent) {
+    if (this.popoverRef?.isOpen) {
+      this.popoverRef?.close();
+      e.stopImmediatePropagation();
+    }
+  }
+
   public pickerOpen = false;
 
   public sortedColors: Array<string | undefined> = [];

projects/shared/src/lib/directives/cancel-close-button.directive.ts

@@ -0,0 +1,51 @@
+import { Directive, HostListener, Output, EventEmitter, inject, OnInit, OnDestroy } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { CancelCloseButtonService } from '../services/cancel-close-button-service';
+
+@Directive({
+  selector: '[tmCancelCloseButton]',
+  standalone: false,
+})
+export class CancelCloseButtonDirective implements OnInit, OnDestroy {
+  private routerLink = inject(RouterLink, { optional: true });
+  private matDialog = inject(MatDialog);
+  private router = inject(Router);
+  private cancelCloseButtonService = inject(CancelCloseButtonService);
+
+  private handler = () => this.triggerAction();
+
+  @Output()
+  public cancelClose = new EventEmitter<void>();
+
+  @HostListener('click')
+  public onClick() {
+    this.triggerAction();
+  }
+
+  @HostListener('window:keydown.escape', ['$event'])
+  public onEscape(event: KeyboardEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    if (this.matDialog.openDialogs.length === 0) {
+      this.cancelCloseButtonService.triggerTop();
+    }
+  }
+
+  private triggerAction() {
+    if (this.routerLink?.urlTree) {
+      this.router.navigateByUrl(this.routerLink.urlTree);
+    }
+    this.cancelClose.emit();
+  }
+
+  public ngOnInit(): void {
+    this.cancelCloseButtonService.push(this.handler);
+  }
+
+  public ngOnDestroy(): void {
+    this.cancelCloseButtonService.remove(this.handler);
+  }
+
+}

projects/shared/src/lib/directives/index.ts

@@ -1,3 +1,4 @@
 export * from './auto-focus.directive';
 export * from './tooltip.directive';
+export * from './cancel-close-button.directive';
 export * from './shared-directives.module';

projects/shared/src/lib/directives/shared-directives.module.ts

@@ -1,16 +1,19 @@
 import { NgModule } from '@angular/core';
 import { TooltipDirective } from './tooltip.directive';
 import { AutoFocusDirective } from './auto-focus.directive';
+import { CancelCloseButtonDirective } from './cancel-close-button.directive';
 
 
 @NgModule({
   declarations: [
     AutoFocusDirective,
     TooltipDirective,
+    CancelCloseButtonDirective,
   ],
   exports: [
     AutoFocusDirective,
     TooltipDirective,
+    CancelCloseButtonDirective,
   ],
 })
 export class SharedDirectivesModule {

projects/shared/src/lib/services/cancel-close-button-service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CancelCloseButtonService {
+  private stack: (() => void)[] = [];
+
+  public push(handler: () => void) {
+    this.stack.push(handler);
+  }
+
+  public remove(handler: () => void) {
+    this.stack = this.stack.filter(h => h !== handler);
+  }
+
+  public triggerTop() {
+    const top = this.stack[this.stack.length - 1];
+    if (top) {
+      top();
+    }
+  }
+}