Fix/1843 fix tabs with router link

package.json

@@ -32,14 +32,15 @@
     "@sl-design-system/button-bar": "^1.2.0",
     "@sl-design-system/checkbox": "^2.1.0",
     "@sl-design-system/checklist": "^0.0.2",
-    "@sl-design-system/sanoma-learning": "^0.4.0",
     "@sl-design-system/form": "^1.2.0",
     "@sl-design-system/icon": "^1.1.0",
     "@sl-design-system/listbox": "^0.1.0",
     "@sl-design-system/radio-group": "^1.1.0",
+    "@sl-design-system/sanoma-learning": "^0.4.0",
     "@sl-design-system/select": "^2.0.0",
     "@sl-design-system/shared": "^0.5.0",
     "@sl-design-system/switch": "^1.1.0",
+    "@sl-design-system/tabs": "^1.1.2",
     "@sl-design-system/text-field": "^1.6.0",
     "@sl-design-system/textarea": "^0.1.24",
     "@webcomponents/scoped-custom-element-registry": "^0.0.10",

src/app/app.component.html

@@ -5,12 +5,6 @@
   </div>
 </header>
 <div class="content">
-  <nav>
-    <a routerLink="" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a>
-    <a routerLink="/form" routerLinkActive="active" ariaCurrentWhenActive="page">Form</a>
-    <a routerLink="/icons" routerLinkActive="active" ariaCurrentWhenActive="page">Icons</a>
-  </nav>
-
   <div *ngIf="!!query; else home">
     <h1>Search result for {{query | json}}</h1>
     <ng-container *ngFor="let result of results">
@@ -19,8 +13,16 @@ <h1>Search result for {{query | json}}</h1>
       <div class="skeleton" style="--w:40%; --m:3rem"></div>
     </ng-container>
   </div>
-  
+
   <ng-template #home>
-    <router-outlet></router-outlet>
+    <sl-tab-group (sl-tab-change)="onTabChange($event)">
+      <sl-tab
+        *ngFor="let tab of tabs"
+        [routerLink]="tab.path"
+      >
+        {{ tab.label }}
+      </sl-tab>
+      <router-outlet></router-outlet>
+    </sl-tab-group>
   </ng-template>
 </div>

src/app/app.component.ts

@@ -3,24 +3,41 @@ import {
   Component,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import { SearchComponent } from './search/search.component';
-import {AvatarComponent} from '@sl-design-system/angular/avatar';
+import { AvatarComponent} from '@sl-design-system/angular/avatar';
+import { TabComponent, TabGroupComponent } from '@sl-design-system/angular/tabs';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet, SearchComponent,  AvatarComponent],
+  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet, SearchComponent, AvatarComponent, TabComponent, TabGroupComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   query = '';
-  results = Array.from(Array(5)).map((_, i) => i );
-  constructor(
-    private ref: ChangeDetectorRef
-  ) {}
+
+  results = Array.from(Array(5)).map((_, i) => i);
+
+  tabs = [
+    {path: '/home', label: 'Home'},
+    {path: '/form', label: 'Form'},
+    {path: '/icons', label: 'Icons'},
+    {path: '/menu', label: 'Menu'},
+    {path: '/dashboard', label: 'Dashboard'},
+    {path: '/assignments', label: 'Assignments'},
+    {path: '/grades', label: 'Grades'},
+    {path: '/settings', label: 'Settings'}
+  ];
+
+  constructor(private ref: ChangeDetectorRef) {}
+
   search(query: string) {
     this.query = query;
   }
+
+  onTabChange(event: any) {
+    event.target.children[event.detail].click();
+  }
 }

src/app/app.routes.ts

@@ -1,20 +1,45 @@
 import { Routes } from '@angular/router';
+import { AssignmentsComponent } from "./assignments/assignments.component";
 import { HomeComponent } from './home/home.component';
 import { FormExampleComponent } from './form/form.component';
 import { IconsComponent } from './icons/icons.component';
+import { MenuComponent } from "./menu/menu.component";
+import { DashboardComponent } from "./dashboard/dashboard.component";
+import {GradesComponent} from "./grades/grades.component";
+import {SettingsComponent} from "./settings/settings.component";
 
 export const routes: Routes = [
+  {
+    path: 'assignments',
+    component: AssignmentsComponent
+  },
   {
     path: 'home',
     component: HomeComponent
   },
+  {
+    path: 'dashboard',
+    component: DashboardComponent
+  },
   {
     path: 'form',
     component: FormExampleComponent
   },
+  {
+    path: 'grades',
+    component: GradesComponent
+  },
   {
     path: 'icons',
     component: IconsComponent
   },
+  {
+    path: 'menu',
+    component: MenuComponent
+  },
+  {
+    path: 'settings',
+    component: SettingsComponent
+  },
   { path: '', redirectTo: '/home', pathMatch: 'full'}
 ];

src/app/assignments/assignments.component.html

@@ -0,0 +1 @@
+<p>assignments works!</p>

src/app/assignments/assignments.component.spec.ts

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

src/app/assignments/assignments.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-assignments',
+  imports: [],
+  templateUrl: './assignments.component.html',
+  styleUrl: './assignments.component.css'
+})
+export class AssignmentsComponent {
+
+}

src/app/dashboard/dashboard.component.html

@@ -0,0 +1 @@
+<p>dashboard works!</p>

src/app/dashboard/dashboard.component.spec.ts

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

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.css'
+})
+export class DashboardComponent {
+
+}

src/app/grades/grades.component.html

@@ -0,0 +1 @@
+<p>grades works!</p>

src/app/grades/grades.component.spec.ts

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

src/app/grades/grades.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-grades',
+  imports: [],
+  templateUrl: './grades.component.html',
+  styleUrl: './grades.component.css'
+})
+export class GradesComponent {
+
+}

src/app/home/home.component.ts

@@ -1,10 +1,9 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild} from '@angular/core';
 import '@sl-design-system/checklist';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'

src/app/settings/settings.component.html

@@ -0,0 +1 @@
+<p>settings works!</p>

src/app/settings/settings.component.spec.ts

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

src/app/settings/settings.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  imports: [],
+  templateUrl: './settings.component.html',
+  styleUrl: './settings.component.css'
+})
+export class SettingsComponent {
+
+}

src/main.ts

@@ -11,6 +11,7 @@ import '@sl-design-system/icon/register.js';
 import '@sl-design-system/checkbox/register.js';
 import '@sl-design-system/form/register.js';
 import '@sl-design-system/radio-group/register.js';
+import '@sl-design-system/tabs/register.js';
 import '@sl-design-system/text-field/register.js';
 import '@sl-design-system/textarea/register.js';
 import '@sl-design-system/select/register.js';