zitadel/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html

<h1 class="title" mat-dialog-title>{{ 'KEYBOARDSHORTCUTS.TITLE' | translate }}</h1>
<div mat-dialog-content>
  <div *ngIf="isNotOnSystem" class="keyboard-shortcuts-group">
    <h2>{{ 'KEYBOARDSHORTCUTS.UNDERORGCONTEXT' | translate }}</h2>
    <div class="keyboard-shortcuts-wrapper">
      <div class="keyboard-shortcut" *ngFor="let shortcut of orgShortcuts">
        <span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
        <span class="fill-space"></span>
        <template
          *ngFor="let key of shortcut.keyboardKeys; index as i"
          [ngTemplateOutlet]="actionkey"
          [ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
        ></template>
      </div>
    </div>
  </div>
  <div class="keyboard-shortcuts-group">
    <h2>{{ 'KEYBOARDSHORTCUTS.SIDEWIDE' | translate }}</h2>
    <div class="keyboard-shortcuts-wrapper">
      <ng-container *ngFor="let shortcut of shortcuts">
        <ng-template cnslHasRole [hasRole]="shortcut.permissions">
          <div class="keyboard-shortcut">
            <span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
            <span class="fill-space"></span>
            <template
              *ngFor="let key of shortcut.keyboardKeys; index as i"
              [ngTemplateOutlet]="actionkey"
              [ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
            ></template>
          </div>
        </ng-template>
      </ng-container>
    </div>
  </div>
</div>
<div mat-dialog-actions class="action">
  <button cdkFocusInitial mat-stroked-button (click)="closeDialog()">
    {{ 'ACTIONS.CLOSE' | translate }}
  </button>
  <span class="fill-space"></span>
</div>

<ng-template #actionkey let-key="key" let-last="last">
  <div class="keyboard-shortcuts-action-key">
    <div class="keyboard-shortcuts-key-overlay"></div>
    <span class="keyboard-shortcuts-span">{{ key }}</span>
  </div>
  <!-- <span *ngIf="!last" class="keyboard-shortcuts-plus cnsl-secondary-text">+</span> -->
</ng-template>