@dotglitch/ngx-common 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/components/command-palette/command-palette.component.mjs +5 -3
- package/esm2022/components/command-palette/shortcut/shortcut.component.mjs +2 -2
- package/esm2022/components/menu/menu.component.mjs +2 -2
- package/esm2022/services/command-palette.service.mjs +22 -13
- package/fesm2022/dotglitch-ngx-common.mjs +27 -16
- package/fesm2022/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
- package/services/command-palette.service.d.ts +11 -5
|
@@ -479,7 +479,7 @@ class MenuComponent {
|
|
|
479
479
|
this.dialogRef = dialogRef;
|
|
480
480
|
this.overlayOverlap = 32;
|
|
481
481
|
this.hoverDelay = 300;
|
|
482
|
-
this.showDebugOverlay =
|
|
482
|
+
this.showDebugOverlay = false;
|
|
483
483
|
this.hasBootstrapped = false;
|
|
484
484
|
this.pointerIsOnVoid = false;
|
|
485
485
|
this.isLockedOpen = false;
|
|
@@ -2271,7 +2271,7 @@ class ShortcutComponent {
|
|
|
2271
2271
|
this.keys = [];
|
|
2272
2272
|
}
|
|
2273
2273
|
ngOnChanges() {
|
|
2274
|
-
this.keys = this.shortcut
|
|
2274
|
+
this.keys = this.shortcut?.split("+");
|
|
2275
2275
|
}
|
|
2276
2276
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2277
2277
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: ShortcutComponent, isStandalone: true, selector: "app-shortcut", inputs: { shortcut: "shortcut" }, usesOnChanges: true, ngImport: i0, template: "@for (key of keys; track key; let i = $index) {\n @if(i > 0) {\n <span class=\"plus\">+</span>\n }\n\n <span class=\"key\">{{key}}</span>\n}\n", styles: [".key{background:#444;padding:2px 6px;border-radius:4px;font-family:Fira Mono,Courier New,Courier,monospace;text-transform:capitalize}.plus{margin:0 4px}\n"] }); }
|
|
@@ -2295,6 +2295,8 @@ class CommandPaletteComponent {
|
|
|
2295
2295
|
ngOnInit() {
|
|
2296
2296
|
this.commands = this.commandPalette.getRegisteredCommands(this.contextElement);
|
|
2297
2297
|
this.filteredCommands = this.commands;
|
|
2298
|
+
// Reset the filter labels
|
|
2299
|
+
this.commands.forEach(command => command['_renderedLabel'] = '');
|
|
2298
2300
|
}
|
|
2299
2301
|
onKeyDown(evt) {
|
|
2300
2302
|
if (evt.key == "Enter") {
|
|
@@ -2361,7 +2363,7 @@ class CommandPaletteComponent {
|
|
|
2361
2363
|
// this.dialog.close();
|
|
2362
2364
|
}
|
|
2363
2365
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommandPaletteComponent, deps: [{ token: CommandPaletteService }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2364
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: CommandPaletteComponent, isStandalone: true, selector: "app-command-palette", inputs: { contextElement: "contextElement" }, host: { listeners: { "window:blur": "onBlur()" } }, ngImport: i0, template: "<mat-form-field style=\"width: 100%; padding: 8px 8px 0 8px\">\n <input\n matInput\n type=\"text\"\n [value]=\"queryString\"\n (keydown)=\"onKeyDown($event)\"\n >\n</mat-form-field>\n\n@if (filteredCommands.length == 0) {\n <div class=\"commands\">\n <div class=\"command selected\"><div class=\"label\">No matching results.</div></div>\n </div>\n}\n@else {\n <div\n class=\"commands\"\n [style.flex]=\"(filteredCommands.length * 28) + 'px'\"\n >\n <ng-scrollbar>\n <cdk-virtual-scroll-viewport itemSize=\"28\" scrollViewport>\n <div\n *cdkVirtualFor=\"let command of filteredCommands; let index = index\"\n class=\"command\"\n [class.selected]=\"index==activeIndex\"\n (click)=\"executeCommand(command)\"\n >\n <div\n class=\"label\"\n [innerHTML]=\"command['_renderedLabel'] || command.label || command.description\"\n ></div>\n <div>\n @for (shortcut of (command.shortcutKey
|
|
2366
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: CommandPaletteComponent, isStandalone: true, selector: "app-command-palette", inputs: { contextElement: "contextElement" }, host: { listeners: { "window:blur": "onBlur()" } }, ngImport: i0, template: "<mat-form-field style=\"width: 100%; padding: 8px 8px 0 8px\">\n <input\n matInput\n type=\"text\"\n [value]=\"queryString\"\n (keydown)=\"onKeyDown($event)\"\n >\n</mat-form-field>\n\n@if (filteredCommands.length == 0) {\n <div class=\"commands\">\n <div class=\"command selected\"><div class=\"label\">No matching results.</div></div>\n </div>\n}\n@else {\n <div\n class=\"commands\"\n [style.flex]=\"(filteredCommands.length * 28) + 'px'\"\n >\n <ng-scrollbar>\n <cdk-virtual-scroll-viewport itemSize=\"28\" scrollViewport>\n <div\n *cdkVirtualFor=\"let command of filteredCommands; let index = index\"\n class=\"command\"\n [class.selected]=\"index==activeIndex\"\n (click)=\"executeCommand(command)\"\n >\n <div\n class=\"label\"\n [innerHTML]=\"command['_renderedLabel'] || command.label || command.description\"\n ></div>\n <div>\n @for (shortcut of (command.shortcutKey?.find ? command.shortcutKey : [command.shortcutKey]); track shortcut) {\n @if (shortcut) {\n <app-shortcut [shortcut]=\"shortcut\"></app-shortcut>\n }\n }\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-scrollbar>\n </div>\n}\n\n", styles: [":host{display:flex;flex-direction:column;width:860px;max-height:460px;border:1px solid #484848;border-radius:5px;background-color:#222;-webkit-user-select:none;user-select:none}.commands{max-height:100%;overflow:hidden}.commands .command{display:flex;height:28px;padding-left:16px;padding-right:32px;align-items:center;border-radius:3px;justify-content:space-between}.commands .command:hover{background-color:#2a2d2e}.commands .command.selected{background-color:#04395e}.commands .command .label ::ng-deep b{color:#2196f3}ng-scrollbar{--scrollbar-padding: 0px;--scrollbar-size: 14px;--scrollbar-border-radius: 0;--scrollbar-thumb-color: #0000;--scrollbar-thumb-transition: height ease-out .15s, width ease-out .15s, background-color ease 1.2s}ng-scrollbar:hover{--scrollbar-thumb-color: #444}cdk-virtual-scroll-viewport{height:100%}:host ::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding:4px 0}:host ::ng-deep .mat-mdc-form-field-infix{min-height:32px}:host ::ng-deep .mat-mdc-text-field-wrapper{margin-bottom:8px}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i5$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i6.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i6.ScrollViewport, selector: "[scrollViewport]" }, { kind: "component", type: ShortcutComponent, selector: "app-shortcut", inputs: ["shortcut"] }] }); }
|
|
2365
2367
|
}
|
|
2366
2368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommandPaletteComponent, decorators: [{
|
|
2367
2369
|
type: Component,
|
|
@@ -2370,7 +2372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
2370
2372
|
ScrollingModule,
|
|
2371
2373
|
NgScrollbarModule,
|
|
2372
2374
|
ShortcutComponent
|
|
2373
|
-
], standalone: true, template: "<mat-form-field style=\"width: 100%; padding: 8px 8px 0 8px\">\n <input\n matInput\n type=\"text\"\n [value]=\"queryString\"\n (keydown)=\"onKeyDown($event)\"\n >\n</mat-form-field>\n\n@if (filteredCommands.length == 0) {\n <div class=\"commands\">\n <div class=\"command selected\"><div class=\"label\">No matching results.</div></div>\n </div>\n}\n@else {\n <div\n class=\"commands\"\n [style.flex]=\"(filteredCommands.length * 28) + 'px'\"\n >\n <ng-scrollbar>\n <cdk-virtual-scroll-viewport itemSize=\"28\" scrollViewport>\n <div\n *cdkVirtualFor=\"let command of filteredCommands; let index = index\"\n class=\"command\"\n [class.selected]=\"index==activeIndex\"\n (click)=\"executeCommand(command)\"\n >\n <div\n class=\"label\"\n [innerHTML]=\"command['_renderedLabel'] || command.label || command.description\"\n ></div>\n <div>\n @for (shortcut of (command.shortcutKey
|
|
2375
|
+
], standalone: true, template: "<mat-form-field style=\"width: 100%; padding: 8px 8px 0 8px\">\n <input\n matInput\n type=\"text\"\n [value]=\"queryString\"\n (keydown)=\"onKeyDown($event)\"\n >\n</mat-form-field>\n\n@if (filteredCommands.length == 0) {\n <div class=\"commands\">\n <div class=\"command selected\"><div class=\"label\">No matching results.</div></div>\n </div>\n}\n@else {\n <div\n class=\"commands\"\n [style.flex]=\"(filteredCommands.length * 28) + 'px'\"\n >\n <ng-scrollbar>\n <cdk-virtual-scroll-viewport itemSize=\"28\" scrollViewport>\n <div\n *cdkVirtualFor=\"let command of filteredCommands; let index = index\"\n class=\"command\"\n [class.selected]=\"index==activeIndex\"\n (click)=\"executeCommand(command)\"\n >\n <div\n class=\"label\"\n [innerHTML]=\"command['_renderedLabel'] || command.label || command.description\"\n ></div>\n <div>\n @for (shortcut of (command.shortcutKey?.find ? command.shortcutKey : [command.shortcutKey]); track shortcut) {\n @if (shortcut) {\n <app-shortcut [shortcut]=\"shortcut\"></app-shortcut>\n }\n }\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-scrollbar>\n </div>\n}\n\n", styles: [":host{display:flex;flex-direction:column;width:860px;max-height:460px;border:1px solid #484848;border-radius:5px;background-color:#222;-webkit-user-select:none;user-select:none}.commands{max-height:100%;overflow:hidden}.commands .command{display:flex;height:28px;padding-left:16px;padding-right:32px;align-items:center;border-radius:3px;justify-content:space-between}.commands .command:hover{background-color:#2a2d2e}.commands .command.selected{background-color:#04395e}.commands .command .label ::ng-deep b{color:#2196f3}ng-scrollbar{--scrollbar-padding: 0px;--scrollbar-size: 14px;--scrollbar-border-radius: 0;--scrollbar-thumb-color: #0000;--scrollbar-thumb-transition: height ease-out .15s, width ease-out .15s, background-color ease 1.2s}ng-scrollbar:hover{--scrollbar-thumb-color: #444}cdk-virtual-scroll-viewport{height:100%}:host ::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding:4px 0}:host ::ng-deep .mat-mdc-form-field-infix{min-height:32px}:host ::ng-deep .mat-mdc-text-field-wrapper{margin-bottom:8px}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
|
|
2374
2376
|
}], ctorParameters: () => [{ type: CommandPaletteService }, { type: i1.MatDialogRef }], propDecorators: { contextElement: [{
|
|
2375
2377
|
type: Input
|
|
2376
2378
|
}], onBlur: [{
|
|
@@ -2379,9 +2381,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
2379
2381
|
}] } });
|
|
2380
2382
|
|
|
2381
2383
|
const { log, warn, err } = ConsoleLogger("CommandPalette", "#2196f3");
|
|
2382
|
-
/**
|
|
2383
|
-
*
|
|
2384
|
-
*/
|
|
2385
2384
|
class CommandPaletteService {
|
|
2386
2385
|
constructor(dialog, lazyLoader) {
|
|
2387
2386
|
this.dialog = dialog;
|
|
@@ -2391,11 +2390,20 @@ class CommandPaletteService {
|
|
|
2391
2390
|
this.interval = setInterval(() => {
|
|
2392
2391
|
// Go backwards since we're splicing items out of the array.
|
|
2393
2392
|
for (let i = this.commandBlocks.length; i >= 0; i--) {
|
|
2394
|
-
|
|
2393
|
+
let commandBlock = this.commandBlocks[i];
|
|
2394
|
+
// If the current index is somehow null, rip it out of
|
|
2395
|
+
// the array and wait for cleanup to trigger again
|
|
2396
|
+
// for the rest of the array.
|
|
2397
|
+
// TODO: Could this lead to leaks where things at the end
|
|
2398
|
+
// never get cleaned?
|
|
2399
|
+
if (commandBlock == null) {
|
|
2400
|
+
this.commandBlocks.splice(i, 1);
|
|
2401
|
+
return;
|
|
2402
|
+
}
|
|
2395
2403
|
// If the element has been disconnected from the DOM, we will
|
|
2396
2404
|
// treat it as having been permanently removed.
|
|
2397
2405
|
// TODO: Could this ever cause unintended consequences?
|
|
2398
|
-
if (!commandBlock
|
|
2406
|
+
if (!commandBlock?.element.isConnected)
|
|
2399
2407
|
this.commandBlocks.splice(i, 1);
|
|
2400
2408
|
}
|
|
2401
2409
|
}, 5 * 60 * 1000);
|
|
@@ -2462,17 +2470,19 @@ class CommandPaletteService {
|
|
|
2462
2470
|
return cb;
|
|
2463
2471
|
})();
|
|
2464
2472
|
// This is likely a duplicate entry
|
|
2465
|
-
if (commandBlock.actions.find(a => a.shortcutKey == action.shortcutKey)) {
|
|
2466
|
-
warn(
|
|
2473
|
+
if (commandBlock.actions.find(a => a.shortcutKey && a.shortcutKey == action.shortcutKey)) {
|
|
2474
|
+
warn(`Inserting duplicate action on element`, { element, action });
|
|
2467
2475
|
}
|
|
2468
2476
|
else {
|
|
2469
2477
|
log(LogIcon.circle_blue, `Inserted action`, action);
|
|
2470
2478
|
}
|
|
2471
2479
|
// Make the shortcut keys lowercase so case sensitivity doesn't scalp someone
|
|
2472
|
-
if (
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2480
|
+
if (action.shortcutKey) {
|
|
2481
|
+
if (Array.isArray(action.shortcutKey))
|
|
2482
|
+
action.shortcutKey = action.shortcutKey.map(k => k.toLowerCase());
|
|
2483
|
+
else
|
|
2484
|
+
action.shortcutKey = action.shortcutKey.toLowerCase();
|
|
2485
|
+
}
|
|
2476
2486
|
commandBlock.actions.push(action);
|
|
2477
2487
|
}
|
|
2478
2488
|
removeCommand(element, action) {
|
|
@@ -2498,7 +2508,8 @@ class CommandPaletteService {
|
|
|
2498
2508
|
action: () => this.openPalette(),
|
|
2499
2509
|
description: "Open the command palette",
|
|
2500
2510
|
keywords: ["command", "prompt", "console", "actions"],
|
|
2501
|
-
label: "Command Palette"
|
|
2511
|
+
label: "Command Palette",
|
|
2512
|
+
visibleInList: false
|
|
2502
2513
|
}
|
|
2503
2514
|
]);
|
|
2504
2515
|
}
|