diff --git a/package.json b/package.json index 5ad8be4..020c9db 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": "^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.html b/src/app/app.component.html index 21d8eb3..516b8d4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -5,12 +5,6 @@
- -

Search result for {{query | json}}

@@ -19,8 +13,16 @@

Search result for {{query | json}}
- + - + + + {{ tab.label }} + + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4748f4f..8a9f080 100644 --- a/src/app/app.component.ts +++ b/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(); + } } 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 @@ +

assignments works!

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; + + 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 @@ +

dashboard works!

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; + + 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 @@ +

grades works!

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; + + 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.ts b/src/app/home/home.component.ts index b2721f5..dd65342 100644 --- a/src/app/home/home.component.ts +++ b/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' 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 @@ +

settings works!

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; + + 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..661f17c 100644 --- a/src/main.ts +++ b/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';