feat(list): add provider directive and remove collection component

apps/demo-app/src/app/app.routes.ts

@@ -1,5 +1,4 @@
 import { Route } from '@angular/router';
-import { ListService } from '@qupaya/sketch';
 
 const UUID_REGEX = /^[a-z,0-9,-]{36,36}$/;
 
@@ -18,7 +17,6 @@ export const appRoutes: Route[] = [
   },
   {
     path: 'list-sample',
-    providers: [ListService],
     children: [
       {
         path: '',

apps/demo-app/src/app/pages/list-sample/list-sample.component.html

@@ -1,4 +1,4 @@
-<sk-list-collection (activeIdChanged)="rootActiveId.set($event)">
+<sk-list skListProvider (activeIdChanged)="rootActiveId.set($event)">
   <div class="sk-list" @skListAnimation>
     @for (rootItem of items(); track rootItem.link) {
     <sk-list-item [skListItemId]="rootItem.link" [skEnableRouting]="true">
@@ -10,7 +10,7 @@
         <span> {{ rootItem.label }} </span>
       </div>
       @if (rootItem.children?.length && rootActiveId() === rootItem.link) {
-      <sk-list-collection
+      <sk-list
         class="sk-child-list"
         sk-childs
         (activeIdChanged)="childActiveId.set($event)"
@@ -30,7 +30,7 @@
             </div>
             @if (childItem.children?.length && childActiveId() ===
             childItem.link) {
-            <sk-list-collection
+            <sk-list
               class="sk-grand-child-list"
               sk-childs
               (activeIdChanged)="grandChildActiveId.set($event)"
@@ -54,14 +54,14 @@
                 </sk-list-item>
                 }
               </div>
-            </sk-list-collection>
+            </sk-list>
             }
           </sk-list-item>
           }
         </div>
-      </sk-list-collection>
+      </sk-list>
       }
     </sk-list-item>
     }
   </div>
-</sk-list-collection>
+</sk-list>

apps/demo-app/src/app/pages/list-sample/list-sample.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
-  ListCollectionComponent,
   ListComponent,
   ListItemActiveDirective,
   ListItemComponent,
+  ListProviderDirective,
 } from '@qupaya/sketch';
 import { SAMPLE_DATA } from './list-sample.data';
 import { query, transition, trigger } from '@angular/animations';
@@ -17,10 +17,10 @@ import { RouterOutlet } from '@angular/router';
   imports: [
     CommonModule,
     ListItemActiveDirective,
-    ListCollectionComponent,
     ListItemComponent,
     ListComponent,
     RouterOutlet,
+    ListProviderDirective,
   ],
   templateUrl: './list-sample.component.html',
   styleUrl: './list-sample.component.css',

libs/sketch/src/lib/components/list/components/list-item/list-item.component.ts

@@ -6,15 +6,13 @@ import {
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ListItemActiveDirective } from '../../directives/list-item-active.directive';
-import { ListCollectionComponent } from '../list-collection/list-collection.component';
 import { ListService } from '../../services/list.service';
+import { ListComponent } from '../../list.component';
 
 @Component({
   selector: 'sk-list-item',
   standalone: true,
-  imports: [CommonModule],
   templateUrl: './list-item.component.html',
   styleUrl: './list-item.component.css',
   encapsulation: ViewEncapsulation.ShadowDom,
@@ -28,7 +26,7 @@ export class ListItemComponent {
     optional: true,
     skipSelf: true,
   });
-  private readonly parentList = inject(ListCollectionComponent, {
+  private readonly parentList = inject(ListComponent, {
     optional: true,
     skipSelf: true,
   });

libs/sketch/src/lib/components/list/directives/list-provider.directive.ts

@@ -0,0 +1,39 @@
+import {
+  AfterViewInit,
+  Directive,
+  forwardRef,
+  inject,
+  OnInit,
+  viewChild,
+} from '@angular/core';
+import { ListService } from '../services/list.service';
+import { ListComponent } from '../list.component';
+
+@Directive({
+  selector: '[skListProvider]',
+  standalone: true,
+  providers: [ListService],
+})
+export class ListProviderDirective implements OnInit, AfterViewInit {
+  private readonly possibleParentList = inject(ListComponent, {
+    optional: true,
+    skipSelf: true,
+  });
+  private readonly listComponent = viewChild(forwardRef(() => ListComponent));
+
+  ngOnInit(): void {
+    if (this.possibleParentList) {
+      throw new Error(
+        'The ListProviderDirective must be set on root sk-list component.'
+      );
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (!this.listComponent) {
+      throw new Error(
+        'The ListProviderDirective must be set on a sk-list component.'
+      );
+    }
+  }
+}

libs/sketch/src/lib/components/list/index.ts

@@ -1,5 +1,5 @@
-export * from './components/list-collection/list-collection.component';
 export * from './components/list-item/list-item.component';
 export * from './directives/list-item-active.directive';
+export * from './directives/list-provider.directive';
 export * from './services/list.service';
 export * from './list.component';

libs/sketch/src/lib/components/list/list.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}

libs/sketch/src/lib/components/list/list.component.ts

@@ -1,13 +1,17 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ListService } from './services/list.service';
+import { Component, output, signal } from '@angular/core';
 
 @Component({
   selector: 'sk-list',
   standalone: true,
-  imports: [CommonModule],
-  providers: [ListService],
   templateUrl: './list.component.html',
   styleUrl: './list.component.css',
 })
-export class ListComponent {}
+export class ListComponent {
+  private readonly activeItemId = signal<string | undefined>(undefined);
+  activeIdChanged = output<string>();
+
+  activateItem(id: string): void {
+    this.activeItemId.update(() => id);
+    this.activeIdChanged.emit(id);
+  }
+}