ng-keyboard-shortcuts
Version:
Dead Simple Keyboard Shortcuts Management for Angular 2+
42 lines • 7.81 kB
JavaScript
import { Component, Input } from '@angular/core';
import { symbols } from './keys';
import { identity } from './utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* @ignore
*/
export class KeyboardShortcutsHelpItemComponent {
constructor() {
}
set shortcut(shortcut) {
const key = Array.isArray(shortcut.key) ? shortcut.key : [shortcut.key];
this.parsedKeys = key.map(key => key
.split(' ')
.filter(identity)
.filter(key => key !== '+')
.map(key => {
if (symbols[key]) {
return symbols[key];
}
return key;
}));
this._shortcut = shortcut;
}
get shortcut() {
return this._shortcut;
}
ngOnInit() {
}
}
KeyboardShortcutsHelpItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: KeyboardShortcutsHelpItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
KeyboardShortcutsHelpItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: KeyboardShortcutsHelpItemComponent, selector: "ng-keyboard-shortcuts-help-item", inputs: { index: "index", shortcut: "shortcut" }, ngImport: i0, template: "<div class=\"item\" [class.item--odd]=\"index % 2 !== 0\" *ngIf=\"shortcut.description\">\n <div class=\"description\">\n <span>{{shortcut.description}}</span>\n </div>\n <div class=\"keys\">\n <div *ngFor=\"let sKey of parsedKeys;let i = index\" class=\"key__container\">\n <span class=\"key\" *ngFor=\"let key of sKey;\">{{key}}</span>\n <span *ngIf=\"parsedKeys.length > 1 && i < parsedKeys.length - 1\" class=\"separator\"> / </span>\n </div>\n </div>\n</div>\n", styles: [".key{border:1px solid #CCCCCC;border-radius:4px;padding:5px 12px;margin-right:5px;background-color:#f5f5f5}.key__container{display:inline-block}.separator{margin-right:5px}.keys{float:right}.item{background-color:#ebebeb;padding:12px}.description{min-width:168px;display:inline-block;color:#333}.item--odd{background-color:#fff}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: KeyboardShortcutsHelpItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-keyboard-shortcuts-help-item', template: "<div class=\"item\" [class.item--odd]=\"index % 2 !== 0\" *ngIf=\"shortcut.description\">\n <div class=\"description\">\n <span>{{shortcut.description}}</span>\n </div>\n <div class=\"keys\">\n <div *ngFor=\"let sKey of parsedKeys;let i = index\" class=\"key__container\">\n <span class=\"key\" *ngFor=\"let key of sKey;\">{{key}}</span>\n <span *ngIf=\"parsedKeys.length > 1 && i < parsedKeys.length - 1\" class=\"separator\"> / </span>\n </div>\n </div>\n</div>\n", styles: [".key{border:1px solid #CCCCCC;border-radius:4px;padding:5px 12px;margin-right:5px;background-color:#f5f5f5}.key__container{display:inline-block}.separator{margin-right:5px}.keys{float:right}.item{background-color:#ebebeb;padding:12px}.description{min-width:168px;display:inline-block;color:#333}.item--odd{background-color:#fff}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { index: [{
type: Input
}], shortcut: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmcta2V5Ym9hcmQtc2hvcnRjdXRzLWhlbHAtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL25nLWtleWJvYXJkLXNob3J0Y3V0cy9zcmMvbGliL25nLWtleWJvYXJkLXNob3J0Y3V0cy1oZWxwLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGlicy9uZy1rZXlib2FyZC1zaG9ydGN1dHMvc3JjL2xpYi9uZy1rZXlib2FyZC1zaG9ydGN1dHMtaGVscC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFTLE1BQU0sZUFBZSxDQUFDO0FBRXZELE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSxRQUFRLENBQUM7QUFDL0IsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLFNBQVMsQ0FBQzs7O0FBRWpDOztHQUVHO0FBTUgsTUFBTSxPQUFPLGtDQUFrQztJQTZCM0M7SUFDQSxDQUFDO0lBekJELElBQ0ksUUFBUSxDQUFDLFFBQWtCO1FBQzNCLE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN4RSxJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FDNUIsR0FBRzthQUNFLEtBQUssQ0FBQyxHQUFHLENBQUM7YUFDVixNQUFNLENBQUMsUUFBUSxDQUFDO2FBQ2hCLE1BQU0sQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxHQUFHLENBQUM7YUFDMUIsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ1AsSUFBSSxPQUFPLENBQUMsR0FBRyxDQUFDLEVBQUU7Z0JBQ2QsT0FBTyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUM7YUFDdkI7WUFDRCxPQUFPLEdBQUcsQ0FBQztRQUNmLENBQUMsQ0FBQyxDQUNULENBQUM7UUFDRixJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBSSxRQUFRO1FBQ1IsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzFCLENBQUM7SUFPRCxRQUFRO0lBQ1IsQ0FBQzs7K0hBakNRLGtDQUFrQzttSEFBbEMsa0NBQWtDLHlIQ2IvQywwZ0JBV0E7MkZERWEsa0NBQWtDO2tCQUw5QyxTQUFTOytCQUNJLGlDQUFpQzswRUFPbEMsS0FBSztzQkFBYixLQUFLO2dCQUdGLFFBQVE7c0JBRFgsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dCwgT25Jbml0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7U2hvcnRjdXR9IGZyb20gJy4vbmcta2V5Ym9hcmQtc2hvcnRjdXRzLmludGVyZmFjZXMnO1xuaW1wb3J0IHtzeW1ib2xzfSBmcm9tICcuL2tleXMnO1xuaW1wb3J0IHtpZGVudGl0eX0gZnJvbSAnLi91dGlscyc7XG5cbi8qKlxuICogQGlnbm9yZVxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25nLWtleWJvYXJkLXNob3J0Y3V0cy1oZWxwLWl0ZW0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9uZy1rZXlib2FyZC1zaG9ydGN1dHMtaGVscC1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9uZy1rZXlib2FyZC1zaG9ydGN1dHMtaGVscC1pdGVtLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgS2V5Ym9hcmRTaG9ydGN1dHNIZWxwSXRlbUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgcHVibGljIHBhcnNlZEtleXM6IHN0cmluZ1tdW107XG5cbiAgICBASW5wdXQoKSBpbmRleDogbnVtYmVyO1xuXG4gICAgQElucHV0KClcbiAgICBzZXQgc2hvcnRjdXQoc2hvcnRjdXQ6IFNob3J0Y3V0KSB7XG4gICAgICAgIGNvbnN0IGtleSA9IEFycmF5LmlzQXJyYXkoc2hvcnRjdXQua2V5KSA/IHNob3J0Y3V0LmtleSA6IFtzaG9ydGN1dC5rZXldO1xuICAgICAgICB0aGlzLnBhcnNlZEtleXMgPSBrZXkubWFwKGtleSA9PlxuICAgICAgICAgICAga2V5XG4gICAgICAgICAgICAgICAgLnNwbGl0KCcgJylcbiAgICAgICAgICAgICAgICAuZmlsdGVyKGlkZW50aXR5KVxuICAgICAgICAgICAgICAgIC5maWx0ZXIoa2V5ID0+IGtleSAhPT0gJysnKVxuICAgICAgICAgICAgICAgIC5tYXAoa2V5ID0+IHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKHN5bWJvbHNba2V5XSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHN5bWJvbHNba2V5XTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICByZXR1cm4ga2V5O1xuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICk7XG4gICAgICAgIHRoaXMuX3Nob3J0Y3V0ID0gc2hvcnRjdXQ7XG4gICAgfVxuXG4gICAgZ2V0IHNob3J0Y3V0KCkge1xuICAgICAgICByZXR1cm4gdGhpcy5fc2hvcnRjdXQ7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfc2hvcnRjdXQ6IFNob3J0Y3V0O1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIml0ZW1cIiBbY2xhc3MuaXRlbS0tb2RkXT1cImluZGV4ICUgMiAhPT0gMFwiICpuZ0lmPVwic2hvcnRjdXQuZGVzY3JpcHRpb25cIj5cbiAgICA8ZGl2IGNsYXNzPVwiZGVzY3JpcHRpb25cIj5cbiAgICAgICAgPHNwYW4+e3tzaG9ydGN1dC5kZXNjcmlwdGlvbn19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJrZXlzXCI+XG4gICAgICAgIDxkaXYgKm5nRm9yPVwibGV0IHNLZXkgb2YgcGFyc2VkS2V5cztsZXQgaSA9IGluZGV4XCIgY2xhc3M9XCJrZXlfX2NvbnRhaW5lclwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJrZXlcIiAqbmdGb3I9XCJsZXQga2V5IG9mIHNLZXk7XCI+e3trZXl9fTwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwicGFyc2VkS2V5cy5sZW5ndGggPiAxICYmIGkgPCBwYXJzZWRLZXlzLmxlbmd0aCAtIDFcIiBjbGFzcz1cInNlcGFyYXRvclwiPiAvIDwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==