@ngneat/hotkeys
Version:
A declarative library for handling hotkeys in Angular applications
26 lines • 9.16 kB
JavaScript
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { HotkeysService } from '../hotkeys.service';
import { HotkeysShortcutPipe } from '../hotkeys-shortcut.pipe';
import * as i0 from "@angular/core";
export class HotkeysHelpComponent {
constructor() {
this.hotkeysService = inject(HotkeysService);
this.title = 'Available Shortcuts';
this.dismiss = new EventEmitter();
this.hotkeys = this.hotkeysService.getShortcuts();
}
handleDismiss() {
this.dismiss.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HotkeysHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: HotkeysHelpComponent, isStandalone: true, selector: "ng-component", inputs: { title: "title" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div class=\"modal-header\">\n @if (title) {\n <div class=\"hotkeys-help-header\">\n <span class=\"hotkeys-help-header-title\">{{ title }}</span>\n </div>\n }\n <button type=\"button\" class=\"hotkeys-help-header-dismiss-button\" (click)=\"handleDismiss()\">✕</button>\n</div>\n<div class=\"modal-body preview-modal-body\">\n @for (hotkeyGroup of hotkeys; track $index) {\n <table class=\"hotkeys-table-help\">\n @if (hotkeyGroup.group) {\n <thead>\n <tr>\n <th class=\"hotkeys-table-help-group\" colspan=\"2\">{{ hotkeyGroup.group }}</th>\n </tr>\n </thead>\n }\n <tbody>\n @for (hotkey of hotkeyGroup.hotkeys; track hotkey) {\n <tr class=\"hotkeys-table-help-shortcut\">\n <td class=\"hotkeys-table-help-shortcut-description\">{{ hotkey.description }}</td>\n <td class=\"hotkeys-table-help-shortcut-keys\">\n <kbd [innerHTML]=\"hotkey.keys | hotkeysShortcut\"></kbd>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n</div>\n", styles: [":host table{border:1px solid #e1e4e8;border-collapse:collapse;width:100%;margin-bottom:1rem;color:#212529}:host th{background-color:#f6f8fa;border-top-left-radius:2px;border-top-right-radius:2px;border:1px solid #d1d5da;font-weight:500;font-size:14px;padding:8px 16px;border-bottom:0;text-align:left}:host td{padding:8px 16px;border-top:1px solid #dee2e6}:host kbd{margin-right:6px;background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px #c6cbd1;color:#444d56;font-size:12px;padding:3px 5px}:host .hotkeys-help-shortcut-keys{text-align:right}:host .modal-header{justify-content:space-between;align-items:center}:host .hotkeys-help-header{font-size:1.25em}:host .hotkeys-help-header-title{line-height:1.5}:host .hotkeys-help-header-dismiss-button{border:none;font-size:18px;background:transparent;cursor:pointer}:host .hotkeys-help-header-dismiss-button:focus{outline:none}\n"], dependencies: [{ kind: "pipe", type: HotkeysShortcutPipe, name: "hotkeysShortcut" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HotkeysHelpComponent, decorators: [{
type: Component,
args: [{ standalone: true, imports: [HotkeysShortcutPipe], template: "<div class=\"modal-header\">\n @if (title) {\n <div class=\"hotkeys-help-header\">\n <span class=\"hotkeys-help-header-title\">{{ title }}</span>\n </div>\n }\n <button type=\"button\" class=\"hotkeys-help-header-dismiss-button\" (click)=\"handleDismiss()\">✕</button>\n</div>\n<div class=\"modal-body preview-modal-body\">\n @for (hotkeyGroup of hotkeys; track $index) {\n <table class=\"hotkeys-table-help\">\n @if (hotkeyGroup.group) {\n <thead>\n <tr>\n <th class=\"hotkeys-table-help-group\" colspan=\"2\">{{ hotkeyGroup.group }}</th>\n </tr>\n </thead>\n }\n <tbody>\n @for (hotkey of hotkeyGroup.hotkeys; track hotkey) {\n <tr class=\"hotkeys-table-help-shortcut\">\n <td class=\"hotkeys-table-help-shortcut-description\">{{ hotkey.description }}</td>\n <td class=\"hotkeys-table-help-shortcut-keys\">\n <kbd [innerHTML]=\"hotkey.keys | hotkeysShortcut\"></kbd>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n</div>\n", styles: [":host table{border:1px solid #e1e4e8;border-collapse:collapse;width:100%;margin-bottom:1rem;color:#212529}:host th{background-color:#f6f8fa;border-top-left-radius:2px;border-top-right-radius:2px;border:1px solid #d1d5da;font-weight:500;font-size:14px;padding:8px 16px;border-bottom:0;text-align:left}:host td{padding:8px 16px;border-top:1px solid #dee2e6}:host kbd{margin-right:6px;background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px #c6cbd1;color:#444d56;font-size:12px;padding:3px 5px}:host .hotkeys-help-shortcut-keys{text-align:right}:host .modal-header{justify-content:space-between;align-items:center}:host .hotkeys-help-header{font-size:1.25em}:host .hotkeys-help-header-title{line-height:1.5}:host .hotkeys-help-header-dismiss-button{border:none;font-size:18px;background:transparent;cursor:pointer}:host .hotkeys-help-header-dismiss-button:focus{outline:none}\n"] }]
}], propDecorators: { title: [{
type: Input
}], dismiss: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG90a2V5cy1oZWxwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nbmVhdC9ob3RrZXlzL3NyYy9saWIvaG90a2V5cy1oZWxwL2hvdGtleXMtaGVscC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ25lYXQvaG90a2V5cy9zcmMvbGliL2hvdGtleXMtaGVscC9ob3RrZXlzLWhlbHAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDOztBQVEvRCxNQUFNLE9BQU8sb0JBQW9CO0lBTmpDO1FBT1UsbUJBQWMsR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDdkMsVUFBSyxHQUFHLHFCQUFxQixDQUFDO1FBQ3BCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2hELFlBQU8sR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRSxDQUFDO0tBSzlDO0lBSEMsYUFBYTtRQUNYLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdEIsQ0FBQzs4R0FSVSxvQkFBb0I7a0dBQXBCLG9CQUFvQixxSUNWakMsd2tDQStCQSwrOUJEekJZLG1CQUFtQjs7MkZBSWxCLG9CQUFvQjtrQkFOaEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxtQkFBbUIsQ0FBQzs4QkFNckIsS0FBSztzQkFBYixLQUFLO2dCQUNhLE9BQU87c0JBQXpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgaW5qZWN0LCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBIb3RrZXlzU2VydmljZSB9IGZyb20gJy4uL2hvdGtleXMuc2VydmljZSc7XG5pbXBvcnQgeyBIb3RrZXlzU2hvcnRjdXRQaXBlIH0gZnJvbSAnLi4vaG90a2V5cy1zaG9ydGN1dC5waXBlJztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtIb3RrZXlzU2hvcnRjdXRQaXBlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2hvdGtleXMtaGVscC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2hvdGtleXMtaGVscC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBIb3RrZXlzSGVscENvbXBvbmVudCB7XG4gIHByaXZhdGUgaG90a2V5c1NlcnZpY2UgPSBpbmplY3QoSG90a2V5c1NlcnZpY2UpO1xuICBASW5wdXQoKSB0aXRsZSA9ICdBdmFpbGFibGUgU2hvcnRjdXRzJztcbiAgQE91dHB1dCgpIHJlYWRvbmx5IGRpc21pc3MgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIGhvdGtleXMgPSB0aGlzLmhvdGtleXNTZXJ2aWNlLmdldFNob3J0Y3V0cygpO1xuXG4gIGhhbmRsZURpc21pc3MoKSB7XG4gICAgdGhpcy5kaXNtaXNzLmVtaXQoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm1vZGFsLWhlYWRlclwiPlxuICBAaWYgKHRpdGxlKSB7XG4gICAgPGRpdiBjbGFzcz1cImhvdGtleXMtaGVscC1oZWFkZXJcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiaG90a2V5cy1oZWxwLWhlYWRlci10aXRsZVwiPnt7IHRpdGxlIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICB9XG4gIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiaG90a2V5cy1oZWxwLWhlYWRlci1kaXNtaXNzLWJ1dHRvblwiIChjbGljayk9XCJoYW5kbGVEaXNtaXNzKClcIj4mI3gyNzE1OzwvYnV0dG9uPlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwibW9kYWwtYm9keSBwcmV2aWV3LW1vZGFsLWJvZHlcIj5cbiAgQGZvciAoaG90a2V5R3JvdXAgb2YgaG90a2V5czsgdHJhY2sgJGluZGV4KSB7XG4gICAgPHRhYmxlIGNsYXNzPVwiaG90a2V5cy10YWJsZS1oZWxwXCI+XG4gICAgICBAaWYgKGhvdGtleUdyb3VwLmdyb3VwKSB7XG4gICAgICAgIDx0aGVhZD5cbiAgICAgICAgICA8dHI+XG4gICAgICAgICAgICA8dGggY2xhc3M9XCJob3RrZXlzLXRhYmxlLWhlbHAtZ3JvdXBcIiBjb2xzcGFuPVwiMlwiPnt7IGhvdGtleUdyb3VwLmdyb3VwIH19PC90aD5cbiAgICAgICAgICA8L3RyPlxuICAgICAgICA8L3RoZWFkPlxuICAgICAgfVxuICAgICAgPHRib2R5PlxuICAgICAgICBAZm9yIChob3RrZXkgb2YgaG90a2V5R3JvdXAuaG90a2V5czsgdHJhY2sgaG90a2V5KSB7XG4gICAgICAgICAgPHRyIGNsYXNzPVwiaG90a2V5cy10YWJsZS1oZWxwLXNob3J0Y3V0XCI+XG4gICAgICAgICAgICA8dGQgY2xhc3M9XCJob3RrZXlzLXRhYmxlLWhlbHAtc2hvcnRjdXQtZGVzY3JpcHRpb25cIj57eyBob3RrZXkuZGVzY3JpcHRpb24gfX08L3RkPlxuICAgICAgICAgICAgPHRkIGNsYXNzPVwiaG90a2V5cy10YWJsZS1oZWxwLXNob3J0Y3V0LWtleXNcIj5cbiAgICAgICAgICAgICAgPGtiZCBbaW5uZXJIVE1MXT1cImhvdGtleS5rZXlzIHwgaG90a2V5c1Nob3J0Y3V0XCI+PC9rYmQ+XG4gICAgICAgICAgICA8L3RkPlxuICAgICAgICAgIDwvdHI+XG4gICAgICAgIH1cbiAgICAgIDwvdGJvZHk+XG4gICAgPC90YWJsZT5cbiAgfVxuPC9kaXY+XG4iXX0=