@dotglitch/ngx-common
Version:
Angular components and utilities that are commonly used.
129 lines (128 loc) • 6.35 kB
TypeScript
import { MatDialog } from '@angular/material/dialog';
import { LazyLoaderService } from '../components/lazy-loader/lazy-loader.service';
import { CommandPaletteComponent } from '../components/command-palette/command-palette.component';
import * as i0 from "@angular/core";
type KeyCode = "Backspace" | "Tab" | "Enter" | "ShiftLeft" | "ShiftRight" | "ControlLeft" | "ControlRight" | "AltLeft" | "AltRight" | "Pause" | "CapsLock" | "Escape" | "Space" | "PageUp" | "PageDown" | "End" | "Home" | "ArrowLeft" | "ArrowUp" | "ArrowRight" | "ArrowDown" | "PrintScreen" | "Insert" | "Delete" | "MetaLeft" | "MetaRight" | "ContextMenu" | "Numpad0" | "Numpad1" | "Numpad2" | "Numpad3" | "Numpad4" | "Numpad5" | "Numpad6" | "Numpad7" | "Numpad8" | "Numpad9" | "NumpadMultiply" | "NumpadAdd" | "NumpadSubtract" | "NumpadDecimal" | "NumpadDivide" | "F1" | "F2" | "F3" | "F4" | "F5" | "F6" | "F7" | "F8" | "F9" | "F10" | "F11" | "F12" | "NumLock" | "ScrollLock" | "Semicolon" | "Equal" | "Comma" | "Minus" | "Period" | "Slash" | "Backquote" | "BracketLeft" | "Backslash" | "BracketRight" | "Quote" | "backspace" | "tab" | "enter" | "shiftleft" | "shiftright" | "controlleft" | "controlright" | "altleft" | "altright" | "pause" | "capslock" | "escape" | "space" | "pageup" | "pagedown" | "end" | "home" | "arrowleft" | "arrowup" | "arrowright" | "arrowdown" | "printscreen" | "insert" | "delete" | "metaleft" | "metaright" | "contextmenu" | "numpad0" | "numpad1" | "numpad2" | "numpad3" | "numpad4" | "numpad5" | "numpad6" | "numpad7" | "numpad8" | "numpad9" | "numpadmultiply" | "numpadadd" | "numpadsubtract" | "numpaddecimal" | "numpaddivide" | "f1" | "f2" | "f3" | "f4" | "f5" | "f6" | "f7" | "f8" | "f9" | "f10" | "f11" | "f12" | "numlock" | "scrolllock" | "semicolon" | "equal" | "comma" | "minus" | "period" | "slash" | "backquote" | "bracketleft" | "backslash" | "bracketright" | "quote" | "A" | "B" | "C" | "D" | "E" | "F" | "G" | "H" | "I" | "J" | "K" | "L" | "M" | "N" | "O" | "P" | "Q" | "R" | "S" | "T" | "U" | "V" | "W" | "X" | "Y" | "Z" | "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
type KeyPrefix = `ctrl` | `ctrl+alt` | `ctrl+alt+shift` | `ctrl+alt+shift+meta` | `ctrl+alt+meta` | `ctrl+shift` | `ctrl+shift+meta` | `ctrl+meta` | `alt` | `alt+shift` | `alt+shift+meta` | `alt+meta` | `shift` | `shift+meta` | `meta`;
export type KeybindEvent = (e: KeyboardEvent) => void;
export type KeybindCode = `${KeyPrefix}+${KeyCode}` | KeyCode;
export type CommandAction<T = any> = {
/**
* The non-modifier key(s) that must be pressed for the event to fire.
*/
shortcutKey?: KeybindCode | KeybindCode[];
/**
* Action that is invoked when the keyboard shortcut is pressed or the item
* is activated in the GUI menu
* If the GUI menu is open, it will show a spinner if the action returns a `Promise`
*/
action?: (evt: KeyboardEvent, data?: T) => Promise<any> | any;
/**
* Arbitrary data object to be passed into the action
*/
data?: T;
/**
* Label in the command palette popup
*/
label?: string;
/**
* Hint that follows the label, subtly
*/
hint?: string;
/**
* Icon for the entry
* Can be a mat-icon
* Will be a mat-icon if the string is simple
* If the string contains a slash or colon, it will be loaded as
* an image source
*/
icon?: string;
/**
* Keywords that can help pick this command
*/
keywords?: string | string[];
/**
* Description for the popup
* WIP
*/
description?: string;
/**
* The root ancestor element of the action
* (This allows scoping commands to specific HTML elements)
* This requires that the event target must be a descendant
*
* If there are multiple matching descendants, only
* the furthest descendant will be fired
*
* For command scoping, we read the data-label attribute
* Alternatively, you can set label and element as an object here.
*/
rootElement?: HTMLElement | string | {
element: HTMLElement | string;
label: string;
};
/**
* The label for the root. Used for the UI control and debugging.
*/
rootName?: string;
/**
* Control whether this command action is visible in the popup command
* palette GUI.
*/
visibleInList?: boolean;
/**
* Enable selecting an item to show a list of sub-items
*/
subMenu?: CommandAction<T>[] | (() => Promise<CommandAction<T>[]>) | (() => CommandAction<T>[]);
};
export type CommandPaletteOptions = {
keybind: KeybindCode;
};
export declare class CommandPaletteService {
private readonly dialog;
private readonly lazyLoader;
private commandBlocks;
private interval;
constructor(dialog: MatDialog, lazyLoader: LazyLoaderService);
private ngOnDestroy;
private getCommandBlocks;
/**
* Handle keydown events
*
* If an event has been removed from the DOM tree, we don't need
* to explicitly remove the bindings, as they will never fire
*
* We periodically check and remove unconnected command blocks
*/
private onKeyDown;
private addCommand;
private removeCommand;
/**
*
*/
initialize(options: CommandPaletteOptions): void;
/**
* Open the command palette
*/
openPalette(): import("@angular/material/dialog").MatDialogRef<CommandPaletteComponent, any>;
/**
* Public helper to invoke an action.
*/
invokeAction(action: CommandAction, args?: any): void;
/**
* Attach commands to an Element and it's subtree
*/
attachElementCommands(actions: CommandAction[]): any;
attachElementCommands(element: HTMLElement, actions: CommandAction[]): any;
/**
* Detach specified commands from an Element subtree
*/
detachElementCommands(element?: HTMLElement, actions?: CommandAction[]): void;
/**
* Return the list of registered commands under a given element
*/
getRegisteredCommands(element?: HTMLElement): CommandAction<any>[];
static ɵfac: i0.ɵɵFactoryDeclaration<CommandPaletteService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<CommandPaletteService>;
}
export {};