feat: update control flow syntax

apps/e2e/karma-ci.conf.js

@@ -1,7 +1,3 @@
 module.exports = function (config) {
-  require('../../karma.conf')(
-    config,
-    require('path').join(__dirname, '../../coverage/e2e'),
-    true
-  );
+  require('../../karma.conf')(config, 'e2e', true);
 };

apps/e2e/karma.conf.js

@@ -1,7 +1,3 @@
 module.exports = function (config) {
-  require('../../karma.conf')(
-    config,
-    require('path').join(__dirname, '../../coverage/e2e'),
-    false
-  );
+  require('../../karma.conf')(config, 'e2e', false);
 };

apps/e2e/src/app/app.component.html

@@ -1,12 +1,14 @@
 <nav>
   <ul>
-    <ng-container *ngFor="let rootRoutes of routes">
-      <ng-container *ngFor="let route of rootRoutes">
-        <li *ngIf="route.title">
-          <a routerLink="{{ route.path }}">{{ route.title }}</a>
-        </li>
-      </ng-container>
-    </ng-container>
+    @for (rootRoutes of routes; track rootRoutes) {
+      @for (route of rootRoutes; track route.path) {
+        @if (route.title) {
+          <li>
+            <a routerLink="{{ route.path }}">{{ route.title }}</a>
+          </li>
+        }
+      }
+    }
   </ul>
 </nav>
 <main>

apps/e2e/src/app/example-with-handles/example-with-handles.component.html

@@ -19,14 +19,12 @@ <h1>Keyboard Sort Example With Handles</h1>
   kbdSortListOrientation="vertical"
   [cdkDropListData]="items"
   [kbdSortListData]="items">
-  <li
-    *ngFor="let item of items; index as i; trackBy: trackByFn"
-    cdkDrag
-    cdkDragLockAxis="y"
-    [kbdSortItem]="i">
-    <div class="handle" kbdSortHandle>{{ item }}</div>
-    <div class="placeholder">🐶</div>
-    <span *kbdSortKeyboardSortItemIfActive>😇 active!</span>
-    <span *kbdSortKeyboardSortItemIfFocused>😊 focused.</span>
-  </li>
+  @for (item of items; track item; let i = $index) {
+    <li cdkDrag cdkDragLockAxis="y" [kbdSortItem]="i">
+      <div class="handle" kbdSortHandle>{{ item }}</div>
+      <div class="placeholder">🐶</div>
+      <span *kbdSortKeyboardSortItemIfActive>😇 active!</span>
+      <span *kbdSortKeyboardSortItemIfFocused>😊 focused.</span>
+    </li>
+  }
 </ul>

apps/e2e/src/app/example-with-handles/example-with-handles.component.ts

@@ -45,8 +45,6 @@ export class ExampleWithHandlesComponent {
   public drop($event: CdkDragDrop<string[]>) {
     moveItemInArray(this.items, $event.previousIndex, $event.currentIndex);
   }
-
-  protected trackByFn = (_: number, item: string) => item;
 }
 
 export default ExampleWithHandlesComponent;

apps/e2e/src/app/example/example.component.html

@@ -13,17 +13,15 @@ <h1>Keyboard Sort Example</h1>
   kbdSortListOrientation="horizontal"
   [cdkDropListData]="items"
   [kbdSortListData]="items">
-  <li
-    *ngFor="let item of items; index as i; trackBy: trackByFn"
-    cdkDrag
-    cdkDragLockAxis="x"
-    [kbdSortItem]="i">
-    {{ item }}
-    <span *kbdSortKeyboardSortItemIfActive class="indicator active-indicator"
-      >🤌</span
-    >
-    <span *kbdSortKeyboardSortItemIfFocused class="indicator focus-indicator"
-      >🫴</span
-    >
-  </li>
+  @for (item of items; track item; let i = $index) {
+    <li cdkDrag cdkDragLockAxis="x" [kbdSortItem]="i">
+      {{ item }}
+      <span *kbdSortKeyboardSortItemIfActive class="indicator active-indicator"
+        >🤌</span
+      >
+      <span *kbdSortKeyboardSortItemIfFocused class="indicator focus-indicator"
+        >🫴</span
+      >
+    </li>
+  }
 </ul>

apps/e2e/src/app/example/example.component.ts

@@ -34,8 +34,6 @@ export class ExampleComponent {
   public drop($event: CdkDragDrop<string[]>) {
     moveItemInArray(this.items, $event.previousIndex, $event.currentIndex);
   }
-
-  protected trackByFn = (_: number, item: string) => item;
 }
 
 export default ExampleComponent;

karma.conf.js

@@ -27,7 +27,7 @@ module.exports = function (config, coverageDir, isCi) {
       suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: coverageDir,
+      dir: __dirname + '/coverage/' + coverageDir,
       subdir: '.',
       reporters: isCi
         ? [{ type: 'text' }]

libs/ng-keyboard-sort/karma-ci.conf.js

@@ -1,7 +1,3 @@
 module.exports = function (config) {
-  require('../../karma.conf')(
-    config,
-    require('path').join(__dirname, '../../coverage/ng-keyboard-sort'),
-    true
-  );
+  require('../../karma.conf')(config, 'ng-keyboard-sort', true);
 };

libs/ng-keyboard-sort/karma.conf.js

@@ -1,7 +1,3 @@
 module.exports = function (config) {
-  require('../../karma.conf')(
-    config,
-    require('path').join(__dirname, '../../coverage/ng-keyboard-sort'),
-    false
-  );
+  require('../../karma.conf')(config, 'ng-keyboard-sort', false);
 };

libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-list-fixture.component.ts

@@ -23,14 +23,13 @@ import { KeyboardSortEventDrop } from '../keyboard-sort-event-drop';
       [kbdSortListOrientation]="direction"
       [kbdSortListDisabled]="disabled"
       (kdbSortDrop)="sortDrop($event)">
-      <li
-        *ngFor="let item of data || []; index as i; trackBy: trackByFn"
-        [kbdSortItem]="i"
-        [attr.id]="'item-' + i">
-        {{ item }}
-        <span *kbdSortKeyboardSortItemIfActive>{{ ' ' }}Active</span>
-        <span *kbdSortKeyboardSortItemIfFocused>{{ ' ' }}Focused</span>
-      </li>
+      @for (item of data || []; track item; let i = $index) {
+        <li [kbdSortItem]="i" [attr.id]="'item-' + i">
+          {{ item }}
+          <span *kbdSortKeyboardSortItemIfActive>{{ ' ' }}Active</span>
+          <span *kbdSortKeyboardSortItemIfFocused>{{ ' ' }}Focused</span>
+        </li>
+      }
     </ul>
     <div>
       <button (click)="activateLastItem()">Activate last item</button>
@@ -55,6 +54,4 @@ export class KeyboardSortListFixtureComponent {
   public sortDrop($event: KeyboardSortEventDrop) {
     this.drops.push($event);
   }
-
-  protected trackByFn = (_: number, item: string) => item;
 }

libs/ng-keyboard-sort/src/lib/keyboard-sort-item.directive.ts

@@ -12,7 +12,7 @@ import {
   Output,
   QueryList,
 } from '@angular/core';
-import { concatWith, of, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { KeyboardSortHandleDirective } from './keyboard-sort-handle.directive';
 import { KeyboardSortListService } from './keyboard-sort-list.service';
 import { KeyboardSortItemService } from './keyboard-sort-item.service';
@@ -50,11 +50,13 @@ export class KeyboardSortItemDirective
     return this.#activated;
   }
   public set activated(value: boolean) {
-    if (value && this.focused) {
-      this.focused = false;
+    if (this.#activated !== value) {
+      if (value && this.focused) {
+        this.focused = false;
+      }
+      this.#activated = value;
+      this.kbdSortItemActivated.emit(value);
     }
-    this.#activated = value;
-    this.kbdSortItemActivated.emit(value);
   }
 
   public get focused(): boolean {
@@ -102,7 +104,6 @@ export class KeyboardSortItemDirective
   #kbdSortItemDisabled = false;
   #activated = false;
   #focused = false;
-  #hasHandles = false;
 
   constructor() {
     this.#itemService.item = this;
@@ -112,15 +113,6 @@ export class KeyboardSortItemDirective
     if (this.activated) {
       this.activated = true;
     }
-    if (this.handles) {
-      this.#subscriptions.add(
-        of(this.handles)
-          .pipe(concatWith(this.handles.changes))
-          .subscribe((handles: QueryList<KeyboardSortHandleDirective>) => {
-            this.#hasHandles = handles.length > 0;
-          })
-      );
-    }
   }
 
   public ngOnDestroy(): void {

libs/ng-keyboard-sort/src/lib/keyboard-sort-list.directive.ts

@@ -1,6 +1,5 @@
 import {
   AfterViewInit,
-  ApplicationRef,
   ChangeDetectorRef,
   ContentChildren,
   Directive,
@@ -57,7 +56,6 @@ export class KeyboardSortListDirective
   @Output()
   public readonly kdbSortDrop = new EventEmitter<KeyboardSortEventDrop>();
 
-  readonly #appRef = inject(ApplicationRef);
   readonly #changeDetectorRef = inject(ChangeDetectorRef);
   #focusKeyManager: FocusKeyManager<KeyboardSortItemDirective> | undefined;
   readonly #focusMonitor = inject(FocusMonitor);
@@ -193,12 +191,8 @@ export class KeyboardSortListDirective
   public deactivateAll(except?: number): void {
     this.items?.forEach((item) => {
       if (item.position !== except) {
-        if (item.activated) {
-          item.activated = false;
-        }
-        if (item.focused) {
-          item.focused = false;
-        }
+        item.activated = false;
+        item.focused = false;
       }
     });
   }