feat: add keyboard shortcut component (#136)

* feat: add keyboard shortcut component

* chore: add docs

* chore: bump version

apps/playground/src/app/nested/nested.component.html

@@ -2,6 +2,7 @@
         [shortcuts]="shortcuts"
         [disabled]="disabledShortcuts"
 ></ng-keyboard-shortcuts>
+<ng-keyboard-shortcut [key]="'shift + k'" (fire)="onShiftPlusKClicked($event)"></ng-keyboard-shortcut>
 <table>
     <tr
             *ngFor="let person of persons; let i = index"

apps/playground/src/app/nested/nested.component.ts

@@ -17,6 +17,10 @@ export class NestedComponent implements OnInit, AfterViewInit {
     selectedIndex = 0;
     disabledShortcuts = false;
 
+    onShiftPlusKClicked(event) {
+        console.log(event);
+    }
+
     @HostListener("shortcut.t k", ['$event'])
     onShortcut(event) {
         console.log(event);

docs/docs/components/keyboard-shortcut.mdx

@@ -0,0 +1,30 @@
+---
+id: ng-keyboard-shortcut
+title: ng-keyboard-shortcut
+sidebar_position: 2
+---
+
+```<ng-keyboard-shortcut>``` component can help you create a single shortcut, in a more declarative way.
+Each component added can be bound to one shortcut, and will emit using (fire) Output binding when the shortcut is clicked.
+Can be useful to create multiple shortcut, each shortcut will be added to the Help menu automatically as long as you provide a description and a label.
+
+
+
+## Example
+
+```html
+
+    <ng-keyboard-shortcut *ngIf="enableShortcut" [key]="'shift + k'" (fire)="onShiftPlusKClicked($event)"></ng-keyboard-shortcut>
+```
+
+
+## Inputs:
+| Name   |      Type      |  Default         | Description |
+|----------|:-------------:|-----------------:  |:-------------:|
+| key |  ```string / string[] ```| none |List or single key (sequencese or combinations) to bind to. |
+| description |    `string`  |   `""`   | the description to show in the help menu |
+| label |    `string`  |   `""`   | the label to group the key in the help menu |
+| preventDefault |    `boolean`  |   `false`   | whether to prevent default of the original key fired |
+| target |    `HTMLElement`  |   `undefined`   | Limit the event to a specific target |
+| allowIn |    `AllowIn`  |   `[]`   | Keys are disable for Input, Select, ContentEditable and Textarea, this can be used to allow the shortcut to work in those elements |
+| throttleTime |    `number`  |   `0`   | Throttle the key event |

libs/ng-keyboard-shortcuts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-keyboard-shortcuts",
-  "version": "13.0.5",
+  "version": "13.0.6",
   "description": "Dead Simple Keyboard Shortcuts Management for Angular 2+",
   "keywords": [
     "angular",

libs/ng-keyboard-shortcuts/src/index.ts

@@ -2,18 +2,19 @@
  * Public API Surface of ng-keyboard-shortcuts
  */
 
-export {KeyboardShortcutsModule} from './lib/ng-keyboard-shortcuts.module';
-import './lib/polyfills';
+export { KeyboardShortcutsModule } from "./lib/ng-keyboard-shortcuts.module";
+import "./lib/polyfills";
 
 export {
     ShortcutInput,
     ShortcutEventOutput,
     AllowIn,
-    Shortcut as ShortcutDirectiveInput,
-} from './lib/ng-keyboard-shortcuts.interfaces';
-export {KeyboardShortcutsHelpService} from './lib/ng-keyboard-shortcuts-help.service';
-export {KeyboardShortcutsPluginProvider} from './lib/ng-keyboard-shortcuts.plugin';
-export {KeyboardShortcutsSelectService} from './lib/ng-keyboard-shortcuts-select.service';
-export {KeyboardShortcutsComponent} from './lib/ng-keyboard-shortcuts.component';
-export {KeyboardShortcutsDirective} from './lib/ng-keyboard-shortcuts.directive';
-export {KeyboardShortcutsHelpComponent} from './lib/ng-keyboard-shortcuts-help.component';
+    Shortcut as ShortcutDirectiveInput
+} from "./lib/ng-keyboard-shortcuts.interfaces";
+export { KeyboardShortcutsHelpService } from "./lib/ng-keyboard-shortcuts-help.service";
+export { KeyboardShortcutsPluginProvider } from "./lib/ng-keyboard-shortcuts.plugin";
+export { KeyboardShortcutsSelectService } from "./lib/ng-keyboard-shortcuts-select.service";
+export { KeyboardShortcutsComponent } from "./lib/ng-keyboard-shortcuts.component";
+export { KeyboardShortcutsDirective } from "./lib/ng-keyboard-shortcuts.directive";
+export { KeyboardShortcutsHelpComponent } from "./lib/ng-keyboard-shortcuts-help.component";
+export * from "./lib/keyboard-shortcut.component";

libs/ng-keyboard-shortcuts/src/lib/keyboard-shortcut.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { KeyboardShortcutComponent } from "./keyboard-shortcut.component";
+
+describe("NgKeyboardShortcutComponent", () => {
+    let component: KeyboardShortcutComponent;
+    let fixture: ComponentFixture<KeyboardShortcutComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [KeyboardShortcutComponent]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(KeyboardShortcutComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

libs/ng-keyboard-shortcuts/src/lib/keyboard-shortcut.component.ts

@@ -0,0 +1,60 @@
+import {
+    Component,
+    OnInit,
+    ChangeDetectionStrategy,
+    Input,
+    OnDestroy,
+    OnChanges,
+    SimpleChanges,
+    AfterViewInit,
+    Output,
+    EventEmitter
+} from '@angular/core';
+import {AllowIn, ShortcutEventOutput} from './ng-keyboard-shortcuts.interfaces';
+import {KeyboardShortcutsService} from './ng-keyboard-shortcuts.service';
+
+@Component({
+    selector: "ng-keyboard-shortcut",
+    template: "<ng-content ></ng-content>",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class KeyboardShortcutComponent implements AfterViewInit, OnDestroy, OnChanges {
+    constructor(private keyboard: KeyboardShortcutsService) {}
+    private clearId;
+
+    @Input() description: string;
+    // @Input() encapsulate = true;
+    @Input() label: string;
+    @Input() preventDefault: boolean;
+    @Input() allowIn: AllowIn[];
+    @Input() key: string | string[];
+    @Input() target: HTMLElement;
+    @Input() throttleTime: number;
+
+    @Output() fire = new EventEmitter();
+
+
+    ngOnDestroy(): void {
+        this.keyboard.remove(this.clearId);
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+
+    }
+
+    ngAfterViewInit(): void {
+        this.clearId = this.keyboard.add({
+            description: this.description,
+            label: this.label,
+            preventDefault: this.preventDefault,
+            allowIn: this.allowIn,
+            target: this.target,
+            key: this.key,
+            throttleTime: this.throttleTime,
+            command: (event: ShortcutEventOutput) => {
+                this.fire.emit(event);
+            }
+        })
+    }
+
+}

libs/ng-keyboard-shortcuts/src/lib/ng-keyboard-shortcuts.module.ts

@@ -1,13 +1,14 @@
-import {ModuleWithProviders, NgModule} from '@angular/core';
-import {KeyboardShortcutsComponent} from './ng-keyboard-shortcuts.component';
-import {KeyboardShortcutsService} from './ng-keyboard-shortcuts.service';
-import {KeyboardShortcutsHelpService} from './ng-keyboard-shortcuts-help.service';
-import {KeyboardShortcutsSelectService} from './ng-keyboard-shortcuts-select.service';
-import {KeyboardShortcutsDirective} from './ng-keyboard-shortcuts.directive';
-import {KeyboardShortcutsHelpComponent} from './ng-keyboard-shortcuts-help.component';
-import {KeyboardShortcutsHelpItemComponent} from './ng-keyboard-shortcuts-help-item.component';
-import {CommonModule} from '@angular/common';
-import {KeyboardShortcutsPluginProvider} from './ng-keyboard-shortcuts.plugin';
+import { ModuleWithProviders, NgModule } from "@angular/core";
+import { KeyboardShortcutsComponent } from "./ng-keyboard-shortcuts.component";
+import { KeyboardShortcutsService } from "./ng-keyboard-shortcuts.service";
+import { KeyboardShortcutsHelpService } from "./ng-keyboard-shortcuts-help.service";
+import { KeyboardShortcutsSelectService } from "./ng-keyboard-shortcuts-select.service";
+import { KeyboardShortcutsDirective } from "./ng-keyboard-shortcuts.directive";
+import { KeyboardShortcutsHelpComponent } from "./ng-keyboard-shortcuts-help.component";
+import { KeyboardShortcutsHelpItemComponent } from "./ng-keyboard-shortcuts-help-item.component";
+import { CommonModule } from "@angular/common";
+import { KeyboardShortcutsPluginProvider } from "./ng-keyboard-shortcuts.plugin";
+import { KeyboardShortcutComponent } from "./keyboard-shortcut.component";
 
 @NgModule({
     imports: [CommonModule],
@@ -16,12 +17,14 @@ import {KeyboardShortcutsPluginProvider} from './ng-keyboard-shortcuts.plugin';
         KeyboardShortcutsComponent,
         KeyboardShortcutsDirective,
         KeyboardShortcutsHelpComponent,
-        KeyboardShortcutsHelpItemComponent
+        KeyboardShortcutsHelpItemComponent,
+        KeyboardShortcutComponent
     ],
     exports: [
         KeyboardShortcutsComponent,
         KeyboardShortcutsDirective,
-        KeyboardShortcutsHelpComponent
+        KeyboardShortcutsHelpComponent,
+        KeyboardShortcutComponent
     ]
 })
 export class KeyboardShortcutsModule {