feat(list): change the provider for list service

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

@@ -1,4 +1,5 @@
 import { Route } from '@angular/router';
+import { ListService } from '@qupaya/sketch';
 
 const UUID_REGEX = /^[a-z,0-9,-]{36,36}$/;
 
@@ -17,6 +18,7 @@ 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 (activeIdChanged)="rootActiveId.set($event)">
+<sk-list-collection (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
+      <sk-list-collection
         class="sk-child-list"
         sk-childs
         (activeIdChanged)="childActiveId.set($event)"
@@ -30,7 +30,7 @@
             </div>
             @if (childItem.children?.length && childActiveId() ===
             childItem.link) {
-            <sk-list
+            <sk-list-collection
               class="sk-grand-child-list"
               sk-childs
               (activeIdChanged)="grandChildActiveId.set($event)"
@@ -54,14 +54,14 @@
                 </sk-list-item>
                 }
               </div>
-            </sk-list>
+            </sk-list-collection>
             }
           </sk-list-item>
           }
         </div>
-      </sk-list>
+      </sk-list-collection>
       }
     </sk-list-item>
     }
   </div>
-</sk-list>
+</sk-list-collection>

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

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ListSampleComponent } from './list-sample.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
+import { ListService } from '@qupaya/sketch';
 
 describe('ListSampleComponent', () => {
   let component: ListSampleComponent;
@@ -14,6 +15,7 @@ describe('ListSampleComponent', () => {
         NoopAnimationsModule,
         RouterModule.forRoot([]),
       ],
+      providers: [ListService],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ListSampleComponent);

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
+  ListCollectionComponent,
   ListComponent,
   ListItemActiveDirective,
   ListItemComponent,
@@ -16,8 +17,9 @@ import { RouterOutlet } from '@angular/router';
   imports: [
     CommonModule,
     ListItemActiveDirective,
-    ListComponent,
+    ListCollectionComponent,
     ListItemComponent,
+    ListComponent,
     RouterOutlet,
   ],
   templateUrl: './list-sample.component.html',

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

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

libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ListCollectionComponent } from './list-collection.component';
+
+describe('ListComponent', () => {
+  let component: ListCollectionComponent;
+  let fixture: ComponentFixture<ListCollectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ListCollectionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ListCollectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Component, output, signal, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ListItemComponent } from '../list-item/list-item.component';
+
+@Component({
+  selector: 'sk-list-collection',
+  standalone: true,
+  imports: [CommonModule, ListItemComponent],
+  templateUrl: './list-collection.component.html',
+  styleUrl: './list-collection.component.css',
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+export class ListCollectionComponent {
+  private readonly activeItemId = signal<string | undefined>(undefined);
+  activeIdChanged = output<string>();
+
+  activateItem(id: string): void {
+    this.activeItemId.update(() => id);
+    this.activeIdChanged.emit(id);
+  }
+}

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

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ListItemComponent } from './list-item.component';
+import { ListService } from '@qupaya/sketch';
 
 describe('ListItemComponent', () => {
   let component: ListItemComponent;
@@ -8,6 +9,7 @@ describe('ListItemComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ListItemComponent],
+      providers: [ListService],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ListItemComponent);

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

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ListItemActiveDirective } from '../../directives/list-item-active.directive';
-import { ListComponent } from '../../list.component';
+import { ListCollectionComponent } from '../list-collection/list-collection.component';
 import { ListService } from '../../services/list.service';
 
 @Component({
@@ -28,7 +28,7 @@ export class ListItemComponent {
     optional: true,
     skipSelf: true,
   });
-  private readonly parentList = inject(ListComponent, {
+  private readonly parentList = inject(ListCollectionComponent, {
     optional: true,
     skipSelf: true,
   });

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

@@ -1,4 +1,5 @@
-export * from './list.component';
+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 './services/list.service';
+export * from './list.component';

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

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

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

@@ -1,21 +1,13 @@
-import { Component, output, signal, ViewEncapsulation } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ListItemComponent } from './components/list-item/list-item.component';
+import { ListService } from './services/list.service';
 
 @Component({
   selector: 'sk-list',
   standalone: true,
-  imports: [CommonModule, ListItemComponent],
+  imports: [CommonModule],
+  providers: [ListService],
   templateUrl: './list.component.html',
   styleUrl: './list.component.css',
-  encapsulation: ViewEncapsulation.ShadowDom,
 })
-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);
-  }
-}
+export class ListComponent {}

libs/sketch/src/lib/components/list/services/list.service.ts

@@ -1,8 +1,6 @@
 import { Injectable, signal } from '@angular/core';
 
-@Injectable({
-  providedIn: 'root',
-})
+@Injectable()
 export class ListService {
   readonly items = signal<{ id: string; parentId?: string; active: boolean }[]>(
     []