feat: angular 17 upgrade along with demo app

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 150
 }

apps/material-ui/project.json

@@ -15,11 +15,8 @@
         "browser": "apps/material-ui/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/material-ui/tsconfig.app.json",
-        "assets": [
-          "apps/material-ui/src/favicon.ico",
-          "apps/material-ui/src/assets"
-        ],
-        "styles": ["apps/material-ui/src/styles.css"],
+        "assets": ["apps/material-ui/src/favicon.ico", "apps/material-ui/src/assets"],
+        "styles": ["apps/material-ui/src/custom-theme.scss", "apps/material-ui/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/material-ui/src/app/app.component.html

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

apps/material-ui/src/app/app.component.ts

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

apps/material-ui/src/app/app.config.ts

@@ -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 })),
+  ],
 };

apps/material-ui/src/app/app.routes.ts

@@ -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 },
+];

apps/material-ui/src/app/connect/connect-success/connect-success.component.html

@@ -0,0 +1 @@
+<p>The mentor is paired with the mentee. Happy learning!</p>

apps/material-ui/src/app/connect/connect-success/connect-success.component.ts

@@ -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 {}

apps/material-ui/src/app/connect/connect.routes.ts

@@ -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,
+  },
+];

apps/material-ui/src/app/connect/connect/connect.component.html

@@ -0,0 +1,11 @@
+<section class="connect">
+  <button
+    mat-button
+    mat-raised-button
+    type="submit"
+    color="primary"
+    [routerLink]="['./connect-success']"
+  >
+    Connect
+  </button>
+</section>

apps/material-ui/src/app/connect/connect/connect.component.ts

@@ -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 {}

apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.css

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

apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.html

@@ -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>&lt;xng-breadcrumb/&gt;</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>

apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.ts

@@ -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 {}