@dotglitch/ngx-common 1.1.6 → 1.1.8

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.
@@ -214,7 +214,7 @@ class TooltipComponent {
214
214
  this.template = this.template || this._data?.template;
215
215
  this.ownerCords = this.ownerCords || this._data?.ownerCords;
216
216
  this.selfCords = this.selfCords || this._data?.selfCords;
217
- this.isLockedOpen = this._data?.isLockedOpen;
217
+ this.isLockedOpen = this._data?.isLockedOpen || this.config?.stayOpen;
218
218
  }
219
219
  ngOnInit() {
220
220
  const selfY = parseInt(this.selfCords.top.replace('px', ''));
@@ -262,7 +262,7 @@ class TooltipComponent {
262
262
  this.dialogRef.close();
263
263
  }
264
264
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ViewContainerRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
265
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n></div>\n\n<div\n #container\n class=\"container\"\n>\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type:
265
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n></div>\n\n<div\n #container\n class=\"container\"\n>\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type:
266
266
  // NgIf,
267
267
  // NgTemplateOutlet,
268
268
  // NgComponentOutlet,
@@ -275,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
275
275
  // NgTemplateOutlet,
276
276
  // NgComponentOutlet,
277
277
  CommonModule,
278
- ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n></div>\n\n<div\n #container\n class=\"container\"\n>\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
278
+ ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n></div>\n\n<div\n #container\n class=\"container\"\n>\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
279
279
  }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
280
280
  type: Optional
281
281
  }, {
@@ -407,7 +407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
407
407
  args: ['pointerleave', ['$event']]
408
408
  }] } });
409
409
  // Helper to open the context menu without using the directive.
410
- const openTooltip = async (dialog, template, data, el, config, focusTrap = false) => {
410
+ const openTooltip = async (dialog, template, data, el, config, focusTrap = false, matPopupOptions) => {
411
411
  const rect = await calcTooltipBounds(template, data);
412
412
  const ownerCords = el.getBoundingClientRect();
413
413
  const cords = getPosition(el, config, rect);
@@ -427,7 +427,8 @@ const openTooltip = async (dialog, template, data, el, config, focusTrap = false
427
427
  },
428
428
  panelClass: ["ngx-tooltip", 'ngx-' + specificId].concat(config?.customClass || []),
429
429
  position: cords,
430
- hasBackdrop: false
430
+ hasBackdrop: false,
431
+ ...matPopupOptions
431
432
  })
432
433
  .afterClosed()
433
434
  .subscribe(s => {
@@ -2286,13 +2287,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
2286
2287
  }] } });
2287
2288
 
2288
2289
  class CommandPaletteComponent {
2289
- constructor(commandPalette, dialog) {
2290
+ constructor(commandPalette, dialog, data) {
2290
2291
  this.commandPalette = commandPalette;
2291
2292
  this.dialog = dialog;
2292
2293
  this.queryString = "";
2293
2294
  this.activeIndex = 0;
2294
2295
  this.commands = [];
2295
2296
  this.filteredCommands = [];
2297
+ this.contextElement = this.contextElement ?? data.contextElement;
2296
2298
  }
2297
2299
  ngOnInit() {
2298
2300
  this.commands = this.commandPalette.getRegisteredCommands(this.contextElement)
@@ -2306,15 +2308,18 @@ class CommandPaletteComponent {
2306
2308
  // Fire the first command
2307
2309
  if (this.filteredCommands.length > 0)
2308
2310
  this.executeCommand(this.filteredCommands[this.activeIndex]);
2311
+ evt.stopPropagation();
2309
2312
  return;
2310
2313
  }
2311
2314
  if (evt.key == "ArrowUp") {
2312
2315
  // Fire the first command
2313
2316
  this.activeIndex = Math.max(this.activeIndex - 1, 0);
2317
+ evt.stopPropagation();
2314
2318
  return;
2315
2319
  }
2316
2320
  if (evt.key == "ArrowDown") {
2317
2321
  this.activeIndex = Math.min(this.filteredCommands.length - 1, this.activeIndex + 1);
2322
+ evt.stopPropagation();
2318
2323
  return;
2319
2324
  }
2320
2325
  this.activeIndex = 0;
@@ -2367,8 +2372,8 @@ class CommandPaletteComponent {
2367
2372
  onBlur() {
2368
2373
  // this.dialog.close();
2369
2374
  }
2370
- 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 }); }
2371
- 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.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.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"] }] }); }
2375
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommandPaletteComponent, deps: [{ token: CommandPaletteService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
2376
+ 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\">\n <div class=\"label\">No matching results.</div>\n </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.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.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}::ng-deep .dark :host{border:1px solid #e5e5e5;background-color:#f8f8f8}::ng-deep .dark :host .commands .command:hover{background-color:#f2f2f2}::ng-deep .dark :host .commands .command.selected{background-color:#e8e8e8}\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"] }] }); }
2372
2377
  }
2373
2378
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommandPaletteComponent, decorators: [{
2374
2379
  type: Component,
@@ -2377,8 +2382,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
2377
2382
  ScrollingModule,
2378
2383
  NgScrollbarModule,
2379
2384
  ShortcutComponent
2380
- ], 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.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.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"] }]
2381
- }], ctorParameters: () => [{ type: CommandPaletteService }, { type: i1.MatDialogRef }], propDecorators: { contextElement: [{
2385
+ ], 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\">\n <div class=\"label\">No matching results.</div>\n </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.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.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}::ng-deep .dark :host{border:1px solid #e5e5e5;background-color:#f8f8f8}::ng-deep .dark :host .commands .command:hover{background-color:#f2f2f2}::ng-deep .dark :host .commands .command.selected{background-color:#e8e8e8}\n"] }]
2386
+ }], ctorParameters: () => [{ type: CommandPaletteService }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
2387
+ type: Inject,
2388
+ args: [MAT_DIALOG_DATA]
2389
+ }] }], propDecorators: { contextElement: [{
2382
2390
  type: Input
2383
2391
  }], onBlur: [{
2384
2392
  type: HostListener,
@@ -2526,7 +2534,9 @@ class CommandPaletteService {
2526
2534
  position: {
2527
2535
  top: "8px"
2528
2536
  },
2529
- data: {}
2537
+ data: {
2538
+ contextElement: document.activeElement
2539
+ }
2530
2540
  });
2531
2541
  }
2532
2542
  /**