From 726331c9517dbbd8d432412d7a2ecebea30f51d6 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 23 Apr 2025 13:20:19 +0200
Subject: [PATCH 1/4] working examples with routerLink and menu item clicking

---
 package.json                                  |  3 +-
 src/app/app.component.html                    | 12 +++-
 src/app/app.component.ts                      | 69 +++++++++++++++++--
 src/app/app.routes.ts                         | 25 +++++++
 src/app/assignments/assignments.component.css |  0
 .../assignments/assignments.component.html    |  1 +
 .../assignments/assignments.component.spec.ts | 23 +++++++
 src/app/assignments/assignments.component.ts  | 11 +++
 src/app/dashboard/dashboard.component.css     |  0
 src/app/dashboard/dashboard.component.html    |  1 +
 src/app/dashboard/dashboard.component.spec.ts | 23 +++++++
 src/app/dashboard/dashboard.component.ts      | 11 +++
 src/app/grades/grades.component.css           |  0
 src/app/grades/grades.component.html          |  1 +
 src/app/grades/grades.component.spec.ts       | 23 +++++++
 src/app/grades/grades.component.ts            | 11 +++
 src/app/home/home.component.html              | 15 ++++
 src/app/home/home.component.ts                | 33 ++++++++-
 src/app/settings/settings.component.css       |  0
 src/app/settings/settings.component.html      |  1 +
 src/app/settings/settings.component.spec.ts   | 23 +++++++
 src/app/settings/settings.component.ts        | 11 +++
 src/main.ts                                   |  2 +
 23 files changed, 287 insertions(+), 12 deletions(-)
 create mode 100644 src/app/assignments/assignments.component.css
 create mode 100644 src/app/assignments/assignments.component.html
 create mode 100644 src/app/assignments/assignments.component.spec.ts
 create mode 100644 src/app/assignments/assignments.component.ts
 create mode 100644 src/app/dashboard/dashboard.component.css
 create mode 100644 src/app/dashboard/dashboard.component.html
 create mode 100644 src/app/dashboard/dashboard.component.spec.ts
 create mode 100644 src/app/dashboard/dashboard.component.ts
 create mode 100644 src/app/grades/grades.component.css
 create mode 100644 src/app/grades/grades.component.html
 create mode 100644 src/app/grades/grades.component.spec.ts
 create mode 100644 src/app/grades/grades.component.ts
 create mode 100644 src/app/settings/settings.component.css
 create mode 100644 src/app/settings/settings.component.html
 create mode 100644 src/app/settings/settings.component.spec.ts
 create mode 100644 src/app/settings/settings.component.ts

diff --git a/package.json b/package.json
index 5ad8be4..dcc0b93 100644
--- a/package.json
+++ b/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": "file:/Users/a.sobczak/IdeaProjects/angular-demo/src/components/packages/components/tabs/src/tabs.js",
     "@sl-design-system/text-field": "^1.6.0",
     "@sl-design-system/textarea": "^0.1.24",
     "@webcomponents/scoped-custom-element-registry": "^0.0.10",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 21d8eb3..bcfc8a5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -19,8 +19,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 #tabgroup (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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4748f4f..d1af626 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,26 +1,81 @@
 import {
+  AfterViewInit,
   ChangeDetectorRef,
-  Component,
+  Component, ElementRef, OnDestroy, ViewChild,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import {ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import { SearchComponent } from './search/search.component';
 import {AvatarComponent} from '@sl-design-system/angular/avatar';
+import {TabComponent, TabGroupComponent} from "@sl-design-system/angular/tabs";
+import {Tab} from "@sl-design-system/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 {
+export class AppComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('tabgroup') tabgroup: TabGroupComponent;  //ElementRef<TabGroupComponent>;
+
   query = '';
-  results = Array.from(Array(5)).map((_, i) => i );
+
+  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
-  ) {}
+    private ref: ChangeDetectorRef,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {
+  }
+
+  ngOnInit(): void {
+    // requestAnimationFrame(() => {
+    //   console.log('this.tabGroup', this.tabgroup);
+    //
+    //   this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
+    // })
+    // console.log('this.tabGroup', this.tabgroup);
+    //
+    // this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
+  }
+
+  ngAfterViewInit(): void {
+    console.log('this.tabGroup', this.tabgroup);
+
+    this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
+  }
+
+  ngOnDestroy(): void {
+    this.tabgroup?.elRef.nativeElement.removeEventListener('sl-tab-change', this.onRouterLinkActive);
+  }
+
   search(query: string) {
     this.query = query;
   }
+
+  onRouterLinkActive(event: any) {
+    console.log('onRouterLinkActive', event, event.detail, this.tabs[event.detail]);
+    // this.router.navigate([event.detail.tab.value]);
+    // (this.tabs[event.detail] as unknown as Tab).click();
+    event.target.children[event.detail].click();
+  }
+
+  onTabChange(event: any) {
+    console.log('onTabChange', event, this.tabs[event.detail]);
+    // event.target.children[event.detail].click();
+  }
 }
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index da2c009..4d041d1 100644
--- a/src/app/app.routes.ts
+++ b/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'}
 ];
diff --git a/src/app/assignments/assignments.component.css b/src/app/assignments/assignments.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/assignments/assignments.component.html b/src/app/assignments/assignments.component.html
new file mode 100644
index 0000000..3c0191e
--- /dev/null
+++ b/src/app/assignments/assignments.component.html
@@ -0,0 +1 @@
+<p>assignments works!</p>
diff --git a/src/app/assignments/assignments.component.spec.ts b/src/app/assignments/assignments.component.spec.ts
new file mode 100644
index 0000000..1061a5d
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/assignments/assignments.component.ts b/src/app/assignments/assignments.component.ts
new file mode 100644
index 0000000..2d6afea
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
new file mode 100644
index 0000000..9c5fce9
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.html
@@ -0,0 +1 @@
+<p>dashboard works!</p>
diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..30e39a2
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..65db9aa
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/grades/grades.component.css b/src/app/grades/grades.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/grades/grades.component.html b/src/app/grades/grades.component.html
new file mode 100644
index 0000000..76613e7
--- /dev/null
+++ b/src/app/grades/grades.component.html
@@ -0,0 +1 @@
+<p>grades works!</p>
diff --git a/src/app/grades/grades.component.spec.ts b/src/app/grades/grades.component.spec.ts
new file mode 100644
index 0000000..fbdae50
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/grades/grades.component.ts b/src/app/grades/grades.component.ts
new file mode 100644
index 0000000..98d038d
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index d52a754..366e228 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,2 +1,17 @@
 <h1>SLDS Demo site</h1>
 <slds-checklist></slds-checklist>
+
+<!--<sl-tab-group>-->
+<!--  @for (tab of tabs; track tab) { <sl-tab> {{tab.label}} </sl-tab>   }-->
+<!--</sl-tab-group>-->
+
+
+<!--<sl-tab-group>-->
+<!--  <sl-tab-->
+<!--    *ngFor="let tab of tabs"-->
+<!--    [routerLink]="tab.path"-->
+<!--  >-->
+<!--    {{ tab.label }}-->
+<!--  </sl-tab>-->
+<!--  <router-outlet></router-outlet>-->
+<!--</sl-tab-group>-->
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index b2721f5..e3da086 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,14 +1,43 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild} from '@angular/core';
 import '@sl-design-system/checklist';
+import {TabComponent, TabGroupComponent} from "@sl-design-system/angular/tabs";
+import {RouterLink, RouterOutlet} from "@angular/router";
+import {NgForOf} from "@angular/common";
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [],
+  imports: [
+    TabGroupComponent,
+    TabComponent,
+    RouterLink,
+    NgForOf,
+    RouterOutlet
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
 })
 export class HomeComponent {
+  tabs = [
+    { path: '/form', label: 'form' },
+    { path: '/icons', label: 'icons' },
+    { path: '/dashboard', label: 'Dashboard' },
+    { path: '/assignments', label: 'Assignments' },
+    { path: '/grades', label: 'Grades' },
+    { path: '/schedule', label: 'Schedule' },
+    { path: '/resources', label: 'Resources' },
+    { path: '/announcements', label: 'Announcements' },
+    { path: '/profile', label: 'Profile' },
+    { path: '/settings', label: 'Settings' },
+    { path: '/support', label: 'Support' },
+    { path: '/form', label: 'form' },
+    { path: '/icons', label: 'icons' }
+  ];
+
   constructor( ) {}
+
+  ngOnInit() {
+    console.log('tabs in ngOnInit', this.tabs);
+  }
 }
diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
new file mode 100644
index 0000000..4ab2a41
--- /dev/null
+++ b/src/app/settings/settings.component.html
@@ -0,0 +1 @@
+<p>settings works!</p>
diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts
new file mode 100644
index 0000000..82c748a
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
new file mode 100644
index 0000000..8403591
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/main.ts b/src/main.ts
index ea070f9..e27df7a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,6 +11,8 @@ 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 { tabs } from 'file:/Users/a.sobczak/IdeaProjects/angular-demo/src/components/packages/components/tabs/src/tabs.js';
 import '@sl-design-system/text-field/register.js';
 import '@sl-design-system/textarea/register.js';
 import '@sl-design-system/select/register.js';

From 66cff8e369df47075e4fe09855d260c56b223f49 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 23 Apr 2025 16:16:04 +0200
Subject: [PATCH 2/4] working examples with routerLink and menu item clicking
 (workaround for now)

---
 package.json                   |  2 +-
 src/app/app.component.ts       | 10 +++++-----
 src/app/home/home.component.ts | 10 ----------
 src/main.ts                    |  1 +
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index dcc0b93..020c9db 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@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": "file:/Users/a.sobczak/IdeaProjects/angular-demo/src/components/packages/components/tabs/src/tabs.js",
+    "@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",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d1af626..3fb4c78 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,7 +8,7 @@ import {ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet} from
 import { SearchComponent } from './search/search.component';
 import {AvatarComponent} from '@sl-design-system/angular/avatar';
 import {TabComponent, TabGroupComponent} from "@sl-design-system/angular/tabs";
-import {Tab} from "@sl-design-system/tabs";
+// import {Tab} from "@sl-design-system/tabs";
 
 @Component({
   selector: 'app-root',
@@ -56,11 +56,11 @@ export class AppComponent implements AfterViewInit, OnDestroy {
   ngAfterViewInit(): void {
     console.log('this.tabGroup', this.tabgroup);
 
-    this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
+    // this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
   }
 
   ngOnDestroy(): void {
-    this.tabgroup?.elRef.nativeElement.removeEventListener('sl-tab-change', this.onRouterLinkActive);
+    // this.tabgroup?.elRef.nativeElement.removeEventListener('sl-tab-change', this.onRouterLinkActive);
   }
 
   search(query: string) {
@@ -71,11 +71,11 @@ export class AppComponent implements AfterViewInit, OnDestroy {
     console.log('onRouterLinkActive', event, event.detail, this.tabs[event.detail]);
     // this.router.navigate([event.detail.tab.value]);
     // (this.tabs[event.detail] as unknown as Tab).click();
-    event.target.children[event.detail].click();
+    // event.target.children[event.detail].click();
   }
 
   onTabChange(event: any) {
     console.log('onTabChange', event, this.tabs[event.detail]);
-    // event.target.children[event.detail].click();
+    event.target.children[event.detail].click();
   }
 }
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index e3da086..c0a6634 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,19 +1,9 @@
 import {Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild} from '@angular/core';
 import '@sl-design-system/checklist';
-import {TabComponent, TabGroupComponent} from "@sl-design-system/angular/tabs";
-import {RouterLink, RouterOutlet} from "@angular/router";
-import {NgForOf} from "@angular/common";
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [
-    TabGroupComponent,
-    TabComponent,
-    RouterLink,
-    NgForOf,
-    RouterOutlet
-  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
diff --git a/src/main.ts b/src/main.ts
index e27df7a..bf253ad 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,7 @@ 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/angular/tabs/register.js';
 // import { tabs } from 'file:/Users/a.sobczak/IdeaProjects/angular-demo/src/components/packages/components/tabs/src/tabs.js';
 import '@sl-design-system/text-field/register.js';
 import '@sl-design-system/textarea/register.js';

From c74fa037da11147bb708b4ad3dbabfdb740f3c36 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 24 Apr 2025 10:02:00 +0200
Subject: [PATCH 3/4] cleanup

---
 src/app/app.component.html |  8 +-----
 src/app/app.component.ts   | 50 +++++---------------------------------
 2 files changed, 7 insertions(+), 51 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index bcfc8a5..516b8d4 100644
--- a/src/app/app.component.html
+++ b/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">
@@ -21,7 +15,7 @@ <h1>Search result for {{query | json}}</h1>
   </div>
 
   <ng-template #home>
-    <sl-tab-group #tabgroup (sl-tab-change)="onTabChange($event)">
+    <sl-tab-group (sl-tab-change)="onTabChange($event)">
       <sl-tab
         *ngFor="let tab of tabs"
         [routerLink]="tab.path"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3fb4c78..8a9f080 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,14 +1,12 @@
 import {
-  AfterViewInit,
   ChangeDetectorRef,
-  Component, ElementRef, OnDestroy, ViewChild,
+  Component,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import {ActivatedRoute, Router, 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 {TabComponent, TabGroupComponent} from "@sl-design-system/angular/tabs";
-// import {Tab} from "@sl-design-system/tabs";
+import { AvatarComponent} from '@sl-design-system/angular/avatar';
+import { TabComponent, TabGroupComponent } from '@sl-design-system/angular/tabs';
 
 @Component({
   selector: 'app-root',
@@ -17,9 +15,7 @@ import {TabComponent, TabGroupComponent} from "@sl-design-system/angular/tabs";
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
-export class AppComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('tabgroup') tabgroup: TabGroupComponent;  //ElementRef<TabGroupComponent>;
-
+export class AppComponent {
   query = '';
 
   results = Array.from(Array(5)).map((_, i) => i);
@@ -35,47 +31,13 @@ export class AppComponent implements AfterViewInit, OnDestroy {
     {path: '/settings', label: 'Settings'}
   ];
 
-  constructor(
-    private ref: ChangeDetectorRef,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
-  }
-
-  ngOnInit(): void {
-    // requestAnimationFrame(() => {
-    //   console.log('this.tabGroup', this.tabgroup);
-    //
-    //   this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
-    // })
-    // console.log('this.tabGroup', this.tabgroup);
-    //
-    // this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
-  }
-
-  ngAfterViewInit(): void {
-    console.log('this.tabGroup', this.tabgroup);
-
-    // this.tabgroup.elRef.nativeElement.addEventListener('sl-tab-change', this.onRouterLinkActive);
-  }
-
-  ngOnDestroy(): void {
-    // this.tabgroup?.elRef.nativeElement.removeEventListener('sl-tab-change', this.onRouterLinkActive);
-  }
+  constructor(private ref: ChangeDetectorRef) {}
 
   search(query: string) {
     this.query = query;
   }
 
-  onRouterLinkActive(event: any) {
-    console.log('onRouterLinkActive', event, event.detail, this.tabs[event.detail]);
-    // this.router.navigate([event.detail.tab.value]);
-    // (this.tabs[event.detail] as unknown as Tab).click();
-    // event.target.children[event.detail].click();
-  }
-
   onTabChange(event: any) {
-    console.log('onTabChange', event, this.tabs[event.detail]);
     event.target.children[event.detail].click();
   }
 }

From 37b55a7e603a0b4bb2cfcacafc50eddc28e4a616 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 24 Apr 2025 10:08:49 +0200
Subject: [PATCH 4/4] cleanup

---
 src/app/home/home.component.html | 15 ---------------
 src/app/home/home.component.ts   | 20 --------------------
 src/main.ts                      |  2 --
 3 files changed, 37 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 366e228..d52a754 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,17 +1,2 @@
 <h1>SLDS Demo site</h1>
 <slds-checklist></slds-checklist>
-
-<!--<sl-tab-group>-->
-<!--  @for (tab of tabs; track tab) { <sl-tab> {{tab.label}} </sl-tab>   }-->
-<!--</sl-tab-group>-->
-
-
-<!--<sl-tab-group>-->
-<!--  <sl-tab-->
-<!--    *ngFor="let tab of tabs"-->
-<!--    [routerLink]="tab.path"-->
-<!--  >-->
-<!--    {{ tab.label }}-->
-<!--  </sl-tab>-->
-<!--  <router-outlet></router-outlet>-->
-<!--</sl-tab-group>-->
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index c0a6634..dd65342 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -9,25 +9,5 @@ import '@sl-design-system/checklist';
   styleUrl: './home.component.css'
 })
 export class HomeComponent {
-  tabs = [
-    { path: '/form', label: 'form' },
-    { path: '/icons', label: 'icons' },
-    { path: '/dashboard', label: 'Dashboard' },
-    { path: '/assignments', label: 'Assignments' },
-    { path: '/grades', label: 'Grades' },
-    { path: '/schedule', label: 'Schedule' },
-    { path: '/resources', label: 'Resources' },
-    { path: '/announcements', label: 'Announcements' },
-    { path: '/profile', label: 'Profile' },
-    { path: '/settings', label: 'Settings' },
-    { path: '/support', label: 'Support' },
-    { path: '/form', label: 'form' },
-    { path: '/icons', label: 'icons' }
-  ];
-
   constructor( ) {}
-
-  ngOnInit() {
-    console.log('tabs in ngOnInit', this.tabs);
-  }
 }
diff --git a/src/main.ts b/src/main.ts
index bf253ad..661f17c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,8 +12,6 @@ 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/angular/tabs/register.js';
-// import { tabs } from 'file:/Users/a.sobczak/IdeaProjects/angular-demo/src/components/packages/components/tabs/src/tabs.js';
 import '@sl-design-system/text-field/register.js';
 import '@sl-design-system/textarea/register.js';
 import '@sl-design-system/select/register.js';