feat: handle majority of functinalities from commans component

Author: shhdharmen

package-lock.json

@@ -30,7 +30,7 @@
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
     "@ngneat/lib": "^5.0.0",
-    "@ngneat/overview": "^3.0.4",
+    "@ngneat/overview": "^4.1.0",
     "@ngneat/until-destroy": "^9.2.3",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

package.json

@@ -36,7 +36,7 @@ export const ngAdd = (options: Schema): Rule => (tree: Tree) => {
 
 const addPackageJsonDependencies = (): Rule => (host: Tree, context: SchematicContext) => {
   const dependencies: { name: string; version: string }[] = [
-    { name: '@ngneat/overview', version: '3.0.4' },
+    { name: '@ngneat/overview', version: '4.1.0' },
     { name: '@ngneat//until-destroy', version: '9.2.3' },
   ];
 

projects/ngneat/cmdk/schematics/ng-add/index.ts

@@ -8,23 +8,17 @@ import { SeparatorComponent } from './components/separator/separator.component';
 import { CommonModule } from '@angular/common';
 import { ItemDirective } from './directives/item/item.directive';
 
+const ComponentsAndDirectives = [
+  CommandComponent,
+  InputDirective,
+  EmptyDirective,
+  GroupComponent,
+  SeparatorComponent,
+  ItemDirective,
+];
 @NgModule({
-  declarations: [
-    CommandComponent,
-    InputDirective,
-    EmptyDirective,
-    GroupComponent,
-    SeparatorComponent,
-    ItemDirective,
-  ],
+  declarations: ComponentsAndDirectives,
   imports: [CommonModule, DynamicViewModule],
-  exports: [
-    CommandComponent,
-    InputDirective,
-    EmptyDirective,
-    GroupComponent,
-    SeparatorComponent,
-    ItemDirective,
-  ],
+  exports: ComponentsAndDirectives,
 })
 export class CmdkModule {}

projects/ngneat/cmdk/src/lib/cmdk.module.ts

@@ -1,12 +1,30 @@
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
+import { ReplaySubject, Subject } from 'rxjs';
 
 @Injectable()
 export class CmdkService {
-  private _searchSub = new Subject<string | undefined>();
+  private _searchSub = new Subject<string>();
   search$ = this._searchSub.asObservable();
+  private _valueSub = new ReplaySubject<string>(1);
+  value$ = this._valueSub.asObservable();
+  private _activeItemSub = new ReplaySubject<string>(1);
+  activeItem$ = this._activeItemSub.asObservable();
+  private _activeGroupSub = new ReplaySubject<string>(1);
+  activeGroup$ = this._activeGroupSub.asObservable();
 
-  setSearch(value: string | undefined) {
+  setSearch(value: string) {
     this._searchSub.next(value);
   }
+
+  setValue(value: string) {
+    this._valueSub.next(value);
+  }
+
+  setActiveItem(itemId: string) {
+    this._activeItemSub.next(itemId);
+  }
+
+  setActiveGroup(groupId: string) {
+    this._activeGroupSub.next(groupId);
+  }
 }

projects/ngneat/cmdk/src/lib/cmdk.service.ts

@@ -4,4 +4,4 @@
   </div>
 </ng-template>
 
-<ng-container *dynamicView="cmdkContent"></ng-container>
+<ng-container *ngTemplateOutlet="cmdkContent"></ng-container>

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

@@ -1,4 +1,4 @@
 .cmdk-command {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
 }

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

@@ -3,63 +3,201 @@ import {
   EventEmitter,
   Input,
   Output,
-  ViewEncapsulation,
   ChangeDetectionStrategy,
   ContentChildren,
   QueryList,
   inject,
   ContentChild,
-  AfterContentInit,
+  HostListener,
+  AfterViewInit,
+  OnChanges,
+  SimpleChanges,
 } from '@angular/core';
 import { Content } from '@ngneat/overview';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { first } from 'rxjs';
 import { CmdkService } from '../../cmdk.service';
 import { EmptyDirective } from '../../directives/empty/empty.directive';
 import { ItemDirective } from '../../directives/item/item.directive';
 import { CmdkCommandProps } from '../../types';
+import { GroupComponent } from '../group/group.component';
+import { SeparatorComponent } from '../separator/separator.component';
 
 let commandId = 0;
-@UntilDestroy({ checkProperties: true })
+@UntilDestroy()
 @Component({
   selector: 'cmdk-command',
   templateUrl: './command.component.html',
   styleUrls: ['./command.component.scss'],
   providers: [CmdkService],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
   exportAs: 'cmdkCommand',
 })
-export class CommandComponent implements CmdkCommandProps, AfterContentInit {
+export class CommandComponent
+  implements CmdkCommandProps, AfterViewInit, OnChanges
+{
+  @Output() valueChanged = new EventEmitter<string>();
+  @Input() value?: string;
   @Input() label?: Content;
   @Input() ariaLabel?: string;
-  @Input() shouldFilter = true;
-  @Input() filter?: (value: string, search: string) => boolean;
-  @Input() value?: string;
-  @Output() valueChanged = new EventEmitter<string>();
+  @Input() filter: ((value: string, search: string) => boolean) | null = (
+    value,
+    search
+  ) => {
+    const searchValue = search.toLowerCase();
+    return value.toLowerCase().includes(searchValue);
+  };
 
   @ContentChildren(ItemDirective, { descendants: true })
   items: QueryList<ItemDirective> | undefined;
+  @ContentChildren(GroupComponent, { descendants: true })
+  groups: QueryList<GroupComponent> | undefined;
+  @ContentChildren(SeparatorComponent, { descendants: true })
+  separators: QueryList<SeparatorComponent> | undefined;
   @ContentChild(EmptyDirective) empty!: EmptyDirective;
 
   readonly panelId = `cmdk-command-${commandId++}`;
 
   private cmdkService = inject(CmdkService);
 
-  ngAfterContentInit() {
-    if (this.shouldFilter) {
+  ngOnChanges(changes: SimpleChanges) {
+    if (
+      changes['value'] &&
+      changes['value'].previousValue !== changes['value'].currentValue &&
+      this.value
+    ) {
+      this.setValue(this.value);
+    }
+  }
+
+  ngAfterViewInit() {
+    if (this.filter) {
       this.cmdkService.search$
         .pipe(untilDestroyed(this))
-        .subscribe(() => this.handleSearch());
+        .subscribe((s) => this.handleSearch(s));
     }
-    if (this.items) {
-      this.items.first.active = true;
+
+    if (!this.value) {
+      this.makeFirstItemActive();
+      this.makeFirstGroupActive();
     }
+
+    this.cmdkService.value$
+      .pipe(untilDestroyed(this))
+      .subscribe((value) => this.valueChanged.emit(value));
+
+    this.cmdkService.activeItem$
+      .pipe(untilDestroyed(this))
+      .subscribe((itemId) => {
+        this.setActiveGroupForActiveItem(itemId);
+      });
+  }
+
+  get filteredItems() {
+    return this.items?.filter((item) => item.filtered);
+  }
+
+  get filteredGroups() {
+    return this.groups?.filter((group) => group.filtered);
   }
 
-  handleSearch() {
-    if (this.items) {
-      this.empty.cmdkEmpty = !this.items.some((item) => item.filtered);
-      this.items.first.active = true;
+  handleSearch(search: string) {
+    if (this.items?.length) {
+      // filter items
+      this.items?.forEach((item) => {
+        item.filtered = this.filter ? this.filter(item.value, search) : true;
+      });
+
+      // show/hide empty directive
+      this.empty.cmdkEmpty = this.filteredItems?.length === 0;
+
+      // make first item active and in-turn it will also make first group active, if available
+      this.makeFirstItemActive();
+
+      // show/hide group
+      this.groups?.forEach((group) => {
+        group.showGroup = group.filteredItems?.length > 0;
+        group._cdr.markForCheck();
+      });
+
+      // hide separator if search and filter both are present, else show
+      this.separators?.forEach((seperator) => {
+        seperator.showSeparator = !(this.filter && search);
+        seperator.cdr.markForCheck();
+      });
+    }
+  }
+
+  @HostListener('keyup', ['$event'])
+  onKeyUp(ev: KeyboardEvent) {
+    if (ev.key === 'ArrowDown') {
+      this.makeNextItemActive();
+    } else if (ev.key === 'ArrowUp') {
+      this.makePreviousItemActive();
+    }
+  }
+
+  private makeFirstItemActive() {
+    setTimeout(() => {
+      const firstItem = this.filteredItems?.[0];
+      if (firstItem) {
+        this.cmdkService.setActiveItem(firstItem.itemId);
+      }
+    });
+  }
+
+  private makeFirstGroupActive() {
+    setTimeout(() => {
+      const firstGroup = this.filteredGroups?.[0];
+      if (firstGroup) {
+        this.cmdkService.setActiveGroup(firstGroup.groupId);
+      }
+    });
+  }
+  private makePreviousItemActive() {
+    this.cmdkService.activeItem$
+      .pipe(first(), untilDestroyed(this))
+      .subscribe((activeItemId) => {
+        if (this.filteredItems?.length) {
+          const activeItemIndex = this.filteredItems.findIndex(
+            (item) => item.itemId === activeItemId
+          );
+          const nextActiveItem = this.filteredItems[activeItemIndex - 1];
+          if (nextActiveItem) {
+            const nextActiveItemId = nextActiveItem.itemId;
+            this.cmdkService.setActiveItem(nextActiveItemId);
+          }
+        }
+      });
+  }
+
+  private setActiveGroupForActiveItem(nextActiveItemId: string) {
+    const nextActiveGroupId = this.filteredGroups?.find((group) =>
+      group.filteredItems.some((item) => item.itemId === nextActiveItemId)
+    )?.groupId;
+    if (nextActiveGroupId) {
+      this.cmdkService.setActiveGroup(nextActiveGroupId);
     }
   }
+
+  private makeNextItemActive() {
+    this.cmdkService.activeItem$
+      .pipe(first(), untilDestroyed(this))
+      .subscribe((activeItemId) => {
+        if (this.filteredItems?.length) {
+          const activeItemIndex = this.filteredItems.findIndex(
+            (item) => item.itemId === activeItemId
+          );
+          const nextActiveItem = this.filteredItems[activeItemIndex + 1];
+          if (nextActiveItem) {
+            const nextActiveItemId = nextActiveItem.itemId;
+            this.cmdkService.setActiveItem(nextActiveItemId);
+          }
+        }
+      });
+  }
+
+  private setValue(value: string) {
+    this.cmdkService.setValue(value);
+  }
 }

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

@@ -1,10 +1,12 @@
 <ng-template #cmdkGroup>
-  <ng-container *ngIf="showGroup">
-    <div role="presentation" *ngIf="label" class="cmdk-group-label">{{ label }}</div>
-    <div class="cmdk-group" role="group" [attr.aria-label]="ariaLabel">
+  <div class="cmdk-group" [ngClass]="{'cmdk-group-active': active}" *ngIf="showGroup" [id]="groupId">
+    <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>
 </ng-template>
 
-<ng-container *dynamicView="cmdkGroup"></ng-container>
+<ng-container *ngTemplateOutlet="cmdkGroup"></ng-container>

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

@@ -1,9 +1,4 @@
-.cmdk-group-label {
-    font-weight: bold;
-}
-
-.cmdk-group {
-    display: inline-flex;
+.cmdk-group-content {
+    display: flex;
     flex-direction: column;
-    width: 100%;
 }