-
-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: angular 17 upgrade along with demo app
- Loading branch information
1 parent
fcffb16
commit 7efa039
Showing
80 changed files
with
15,565 additions
and
19,291 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
{ | ||
"singleQuote": true | ||
"singleQuote": true, | ||
"printWidth": 150 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,6 @@ | ||
<app-nx-welcome></app-nx-welcome> <router-outlet></router-outlet> | ||
<div [ngClass]="{ 'xng-dark-theme': darkMode }"> | ||
<app-navbar (themeChanged)="updateTheme($event)"></app-navbar> | ||
<app-breadcrumb-view /> | ||
|
||
<router-outlet></router-outlet> | ||
</div> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,19 @@ | ||
import { CommonModule } from '@angular/common'; | ||
import { Component } from '@angular/core'; | ||
import { RouterModule } from '@angular/router'; | ||
import { NxWelcomeComponent } from './nx-welcome.component'; | ||
import { BreadcrumbViewComponent } from './core/breadcrumb-view/breadcrumb-view.component'; | ||
import { NavbarComponent } from './core/navbar/navbar.component'; | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [NxWelcomeComponent, RouterModule], | ||
imports: [RouterModule, BreadcrumbViewComponent, NavbarComponent, CommonModule], | ||
selector: 'app-root', | ||
templateUrl: './app.component.html', | ||
styleUrl: './app.component.css', | ||
}) | ||
export class AppComponent { | ||
title = 'material-ui'; | ||
darkMode = false; | ||
|
||
updateTheme(theme) { | ||
this.darkMode = theme === 'dark'; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,16 @@ | ||
import { ApplicationConfig } from '@angular/core'; | ||
import { ApplicationConfig, importProvidersFrom } from '@angular/core'; | ||
import { provideRouter } from '@angular/router'; | ||
import { appRoutes } from './app.routes'; | ||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; | ||
import { provideHttpClient } from '@angular/common/http'; | ||
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; | ||
import { InMemoryDataService } from './core/data/in-memory-data.service'; | ||
|
||
export const appConfig: ApplicationConfig = { | ||
providers: [provideRouter(appRoutes)], | ||
providers: [ | ||
provideHttpClient(), | ||
provideRouter(appRoutes), | ||
provideAnimationsAsync(), | ||
importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 100 })), | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,59 @@ | ||
import { Route } from '@angular/router'; | ||
import { HomeComponent } from './home/home.component'; | ||
import { PageNotFoundComponent } from './core/page-not-found/page-not-found.component'; | ||
|
||
export const appRoutes: Route[] = []; | ||
export const appRoutes: Route[] = [ | ||
{ | ||
path: 'dashboard', | ||
loadChildren: () => import('./dashboard/dashboard.routes').then((m) => m.DASHBOARD_ROUTES), | ||
data: { | ||
breadcrumb: { | ||
label: 'dashboard', | ||
info: 'dashboard', | ||
}, | ||
}, | ||
}, | ||
{ | ||
path: 'mentor', | ||
loadChildren: () => import('./mentor/mentor.routes').then((m) => m.MENTOR_ROUTES), | ||
data: { | ||
breadcrumb: { | ||
info: 'person', | ||
}, | ||
}, | ||
}, | ||
{ | ||
path: 'mentee', | ||
loadChildren: () => import('./mentee/mentee.routes').then((m) => m.MENTEE_ROUTES), | ||
data: { | ||
breadcrumb: { | ||
info: 'person_outline', | ||
label: 'Mentee (Root)', | ||
}, | ||
}, | ||
}, | ||
{ | ||
path: 'connect', | ||
loadChildren: () => import('./connect/connect.routes').then((m) => m.CONNECT_ROUTES), | ||
data: { | ||
breadcrumb: { | ||
disable: true, | ||
}, | ||
}, | ||
}, | ||
{ | ||
path: '', | ||
pathMatch: 'full', | ||
component: HomeComponent, | ||
data: { | ||
breadcrumb: { | ||
label: 'app', | ||
info: 'home', | ||
routeInterceptor: (routeLink) => { | ||
return routeLink; | ||
}, | ||
}, | ||
}, | ||
}, | ||
{ path: '**', pathMatch: 'full', component: PageNotFoundComponent }, | ||
]; |
1 change: 1 addition & 0 deletions
1
apps/material-ui/src/app/connect/connect-success/connect-success.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<p>The mentor is paired with the mentee. Happy learning!</p> |
11 changes: 11 additions & 0 deletions
11
apps/material-ui/src/app/connect/connect-success/connect-success.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { Component } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
|
||
@Component({ | ||
selector: 'app-connect-success', | ||
standalone: true, | ||
imports: [CommonModule], | ||
templateUrl: './connect-success.component.html', | ||
styles: ``, | ||
}) | ||
export class ConnectSuccessComponent {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Route } from '@angular/router'; | ||
import { ConnectSuccessComponent } from './connect-success/connect-success.component'; | ||
import { ConnectComponent } from './connect/connect.component'; | ||
|
||
export const CONNECT_ROUTES: Route[] = [ | ||
{ | ||
path: '', | ||
component: ConnectComponent, | ||
}, | ||
{ | ||
path: 'connect-success', | ||
component: ConnectSuccessComponent, | ||
}, | ||
]; |
11 changes: 11 additions & 0 deletions
11
apps/material-ui/src/app/connect/connect/connect.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<section class="connect"> | ||
<button | ||
mat-button | ||
mat-raised-button | ||
type="submit" | ||
color="primary" | ||
[routerLink]="['./connect-success']" | ||
> | ||
Connect | ||
</button> | ||
</section> |
22 changes: 22 additions & 0 deletions
22
apps/material-ui/src/app/connect/connect/connect.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { Component } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { RouterLink } from '@angular/router'; | ||
import { MatButton } from '@angular/material/button'; | ||
|
||
@Component({ | ||
selector: 'app-connect', | ||
standalone: true, | ||
imports: [CommonModule, MatButton, RouterLink], | ||
templateUrl: './connect.component.html', | ||
styles: ` | ||
.connect { | ||
display: flex; | ||
justify-content: center; | ||
} | ||
.connect button { | ||
width: 200px; | ||
} | ||
`, | ||
}) | ||
export class ConnectComponent {} |
72 changes: 72 additions & 0 deletions
72
apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
ol, | ||
ul { | ||
list-style: none; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
.breadcrumb-type { | ||
padding: 0.5rem 0; | ||
gap: 1.5rem; | ||
justify-content: space-between; | ||
display: flex; | ||
} | ||
|
||
.breadcrumb-type .title { | ||
color: rgb(17 24 39); | ||
line-height: 1.5rem; | ||
font-weight: 600; | ||
font-size: 0.875rem; | ||
} | ||
|
||
.breadcrumb-type .subtitle { | ||
color: rgb(107 114 128); | ||
line-height: 1.25rem; | ||
font-size: 0.75rem; | ||
margin-top: 0.25rem; | ||
} | ||
|
||
p { | ||
margin-block-start: 0; | ||
margin-block-end: 0; | ||
} | ||
|
||
.divide > :not([hidden]) ~ :not([hidden]) { | ||
border-color: rgb(243 244 246); | ||
border-width: 1px 0 0 0; | ||
border-style: solid; | ||
} | ||
|
||
.list { | ||
margin-bottom: 32px; | ||
} | ||
|
||
.container { | ||
padding: 8px; | ||
} | ||
|
||
/* breadcrumb styles customization */ | ||
|
||
.xng-breadcrumb-root { | ||
padding: 8px 16px; | ||
display: inline-block; | ||
border-radius: 4px; | ||
} | ||
|
||
.myapp-breadcrumb .xng-breadcrumb-trail { | ||
color: teal; | ||
} | ||
|
||
.custom-breadcrumb.xng-breadcrumb-root .xng-breadcrumb-item { | ||
border-radius: 16px; | ||
background-color: #f5f5f5; | ||
padding: 4px 8px; | ||
} | ||
|
||
.advanced1.xng-breadcrumb-root { | ||
background-color: #e7f1f1; | ||
} | ||
|
||
.separator-icon { | ||
color: teal; | ||
} |
63 changes: 63 additions & 0 deletions
63
apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
<div class="max-w-sm container"> | ||
<ul role="list" class="flex-col gap-4 divide max-w-sm list"> | ||
<li class="breadcrumb-type flex-row items-center"> | ||
<div> | ||
<p class="title">Default breadcrumbs</p> | ||
<p class="subtitle">Just drop <b><xng-breadcrumb/></b> anywhere</p> | ||
</div> | ||
<xng-breadcrumb class="default"></xng-breadcrumb> | ||
</li> | ||
|
||
<li class="breadcrumb-type flex-row items-center"> | ||
<div> | ||
<p class="title">Title case and custom separator</p> | ||
<p class="subtitle">Use pipe on breadcrumb for title case and custom text on separator</p> | ||
</div> | ||
<xng-breadcrumb separator="~" class="title-case"> | ||
<ng-container *xngBreadcrumbItem="let breadcrumb"> | ||
{{ breadcrumb | titlecase }} | ||
</ng-container> | ||
</xng-breadcrumb> | ||
</li> | ||
|
||
<li class="breadcrumb-type flex-row items-center"> | ||
<div> | ||
<p class="title">Material Icon as separator</p> | ||
<p class="subtitle">Custom template for icon, background color on each item</p> | ||
</div> | ||
<xng-breadcrumb [separator]="separatorTemplate" class="custom-breadcrumb"></xng-breadcrumb> | ||
|
||
<ng-template #separatorTemplate> | ||
<mat-icon class="separator-icon">arrow_right</mat-icon> | ||
</ng-template> | ||
</li> | ||
|
||
<li class="breadcrumb-type flex-row items-center"> | ||
<div> | ||
<p class="title">Advanced usage 1</p> | ||
<p class="subtitle">Custom background, preserveQueryParams(false), use info from breadcrumb to show icons</p> | ||
</div> | ||
<xng-breadcrumb separator="→" class="myapp-breadcrumb" [preserveQueryParams]="false" class="advanced1"> | ||
<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first"> | ||
<mat-icon *ngIf="info" class="mat-icon-size" inline="true">{{ info }}</mat-icon> | ||
<ng-container>{{ breadcrumb | titlecase }}</ng-container> | ||
</ng-container> | ||
</xng-breadcrumb> | ||
</li> | ||
|
||
<li class="breadcrumb-type flex-row items-center"> | ||
<div> | ||
<p class="title">Advanced usage 2</p> | ||
<p class="subtitle">Open breadcrumb link in new tab, different style on tail, preserveFragment(false) etc</p> | ||
</div> | ||
<xng-breadcrumb separator="→" class="myapp-breadcrumb" [preserveFragment]="false" anchorTarget="_blank" class="advanced2"> | ||
<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first"> | ||
<mat-icon *ngIf="info" class="mat-icon-size" inline="true">{{ info }}</mat-icon> | ||
<ng-container *ngIf="!first">{{ breadcrumb | titlecase }}</ng-container> | ||
</ng-container> | ||
</xng-breadcrumb> | ||
</li> | ||
</ul> | ||
|
||
<router-outlet></router-outlet> | ||
</div> |
14 changes: 14 additions & 0 deletions
14
apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Component } from '@angular/core'; | ||
import { CommonModule, NgIf, TitleCasePipe } from '@angular/common'; | ||
import { BreadcrumbComponent, BreadcrumbItemDirective } from 'xng-breadcrumb'; | ||
import { RouterOutlet } from '@angular/router'; | ||
import { MatIcon } from '@angular/material/icon'; | ||
|
||
@Component({ | ||
selector: 'app-breadcrumb-view', | ||
standalone: true, | ||
styleUrls: ['./breadcrumb-view.component.css'], | ||
templateUrl: './breadcrumb-view.component.html', | ||
imports: [CommonModule, BreadcrumbComponent, BreadcrumbItemDirective, MatIcon, NgIf, RouterOutlet, TitleCasePipe], | ||
}) | ||
export class BreadcrumbViewComponent {} |
Oops, something went wrong.