feat: add classes in host for group, list and separator

Author: shhdharmen

projects/ngneat/cmdk/src/lib/components/command/command.component.ts

@@ -22,7 +22,11 @@ import { ItemDirective } from '../../directives/item/item.directive';
 import { CmdkCommandProps } from '../../types';
 import { GroupComponent } from '../group/group.component';
 import { SeparatorComponent } from '../separator/separator.component';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import {
+  ActiveDescendantKeyManager,
+  FocusKeyManager,
+  ListKeyManager,
+} from '@angular/cdk/a11y';
 import { LoaderDirective } from '../../directives/loader/loader.directive';
 import { ListComponent } from '../list/list.component';
 
@@ -100,6 +104,7 @@ export class CommandComponent
     this.keyManager = new ActiveDescendantKeyManager(this.items)
       .withWrap()
       .skipPredicate((item) => item.disabled || !item.filtered);
+
     if (this.filter) {
       this.cmdkService.search$
         .pipe(untilDestroyed(this))
@@ -199,10 +204,8 @@ export class CommandComponent
     setTimeout(() => {
       const firstItem = this.filteredItems?.[0];
       if (firstItem) {
-        console.log('first item found');
         this.keyManager.setFirstItemActive();
       } else {
-        console.log('first item not found');
         this.valueChanged.emit(undefined);
       }
     });

projects/ngneat/cmdk/src/lib/components/group/group.component.html

@@ -1,10 +1,6 @@
-<ng-container
-  *ngIf="showGroup"
->
-  <div role="presentation" *ngIf="label" class="cmdk-group-label">
-    <ng-container *dynamicView="label"></ng-container>
-  </div>
-  <div class="cmdk-group-content" role="group" [attr.aria-label]="ariaLabel">
-    <ng-content></ng-content>
-  </div>
-</ng-container>
+<div role="presentation" *ngIf="label" class="cmdk-group-label">
+  <ng-container *dynamicView="label"></ng-container>
+</div>
+<div class="cmdk-group-content" role="group" [attr.aria-label]="ariaLabel">
+  <ng-content></ng-content>
+</div>

projects/ngneat/cmdk/src/lib/components/group/group.component.ts

@@ -60,4 +60,9 @@ export class GroupComponent implements CmdkGroupProps {
   get activeClass() {
     return this.active;
   }
+
+  @HostBinding('attr.cmdk-hidden')
+  get hidden() {
+    return !this.showGroup;
+  }
 }

projects/ngneat/cmdk/src/lib/components/list/list.component.html

@@ -1,7 +1,3 @@
-<ng-container
-  *ngIf="showList"
->
-  <div class="cmdk-list-content" role="listbox" [attr.aria-label]="ariaLabel">
-    <ng-content></ng-content>
-  </div>
-</ng-container>
+<div class="cmdk-list-content" role="listbox" [attr.aria-label]="ariaLabel">
+  <ng-content></ng-content>
+</div>

projects/ngneat/cmdk/src/lib/components/list/list.component.ts

@@ -57,4 +57,9 @@ export class ListComponent {
   get activeClass() {
     return this.active;
   }
+
+  @HostBinding('attr.cmdk-hidden')
+  get hidden() {
+    return !this.showList;
+  }
 }

projects/ngneat/cmdk/src/lib/components/separator/separator.component.html

@@ -1 +1 @@
-<hr *ngIf="showSeparator">
+<hr>

projects/ngneat/cmdk/src/lib/components/separator/separator.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  HostBinding,
   inject,
 } from '@angular/core';
 
@@ -21,4 +22,9 @@ import {
 export class SeparatorComponent {
   showSeparator = true;
   public cdr = inject(ChangeDetectorRef);
+
+  @HostBinding('attr.cmdk-hidden')
+  get hidden() {
+    return !this.showSeparator;
+  }
 }

projects/ngneat/cmdk/src/lib/directives/empty/empty.directive.ts

@@ -1,6 +1,7 @@
 import {
   Directive,
   inject,
+  Renderer2,
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
@@ -16,10 +17,12 @@ export class EmptyDirective {
   private _hasView = false;
   private _templateRef = inject(TemplateRef<any>);
   private _viewContainer = inject(ViewContainerRef);
+  private _renderer2 = inject(Renderer2);
 
   set cmdkEmpty(condition: boolean | string) {
     if (condition && !this._hasView) {
-      this._viewContainer.createEmbeddedView(this._templateRef);
+      const emb = this._viewContainer.createEmbeddedView(this._templateRef);
+      this._renderer2.addClass(emb.rootNodes[0], 'cmdk-empty');
       this._hasView = true;
     } else if (!condition && this._hasView) {
       this._viewContainer.clear();

projects/ngneat/cmdk/src/lib/directives/input/input.directive.ts

@@ -1,19 +1,40 @@
-import { Directive, HostListener, inject } from '@angular/core';
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  HostListener,
+  inject,
+  Input,
+  OnDestroy,
+} from '@angular/core';
 import { CmdkService } from '../../cmdk.service';
 
 @Directive({
   selector: '[cmdkInput]',
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     class: 'cmdk-input',
-    type: 'search',
   },
 })
-export class InputDirective {
+export class InputDirective implements AfterViewInit, OnDestroy {
+  @Input() updateOn: 'blur' | 'change' | 'input' = 'input';
   private _cmdkService = inject(CmdkService);
+  private _elementRef = inject<ElementRef<HTMLInputElement>>(
+    ElementRef<HTMLInputElement>
+  );
 
-  @HostListener('change', ['$event.target.value'])
   search(value: string) {
     this._cmdkService.setSearch(value);
   }
+
+  ngAfterViewInit(): void {
+    this._elementRef.nativeElement.addEventListener(this.updateOn, (ev) =>
+      this.search((ev.target as HTMLInputElement).value)
+    );
+  }
+
+  ngOnDestroy(): void {
+    this._elementRef.nativeElement.removeAllListeners &&
+      this._elementRef.nativeElement.removeAllListeners(this.updateOn);
+  }
 }

projects/ngneat/cmdk/src/lib/directives/item/item.directive.ts

@@ -1,4 +1,9 @@
-import { Highlightable } from '@angular/cdk/a11y';
+import {
+  FocusableOption,
+  FocusOrigin,
+  Highlightable,
+  ListKeyManagerOption,
+} from '@angular/cdk/a11y';
 import {
   Directive,
   ElementRef,
@@ -23,7 +28,7 @@ let cmdkItemId = 0;
     class: 'cmdk-item',
   },
 })
-export class ItemDirective implements CmdkItemProps, Highlightable {
+export class ItemDirective implements CmdkItemProps, ListKeyManagerOption {
   @Input() disabled = false;
   @Output() selected = new EventEmitter();
   getLabel?(): string {
@@ -65,9 +70,9 @@ export class ItemDirective implements CmdkItemProps, Highlightable {
     }
   }
 
-  @HostBinding('style.display')
-  get display() {
-    return !this.filtered ? 'none' : '';
+  @HostBinding('attr.cmdk-hidden')
+  get hidden() {
+    return !this.filtered;
   }
 
   @HostBinding('attr.role')
@@ -102,9 +107,6 @@ export class ItemDirective implements CmdkItemProps, Highlightable {
 
   set active(value: boolean) {
     this._active = value;
-    if (value) {
-      this._elementRef.nativeElement.focus();
-    }
   }
 
   @HostListener('mouseup')