feat(navigation-class-handler): styleguide page

apps/styleguide/src/main.ts

@@ -2,6 +2,7 @@ import { provideHttpClient } from '@angular/common/http'
 import { bootstrapApplication } from '@angular/platform-browser'
 import { provideAnimations } from '@angular/platform-browser/animations'
 import { provideRouter } from '@angular/router'
+import { provideNavigationClassHandler } from '@shiftcode/ngx-components'
 import { LogLevel, provideLocalStorage, provideLogger, withBrowserConsoleTransport } from '@shiftcode/ngx-core'
 import { AppComponent } from './app/app.component'
 import { provideSgConfig } from './provide-sg-config'
@@ -17,6 +18,7 @@ bootstrapApplication(AppComponent, {
     provideLogger(
       withBrowserConsoleTransport(() => ({ logLevel: LogLevel.DEBUG })),
     ),
+    provideNavigationClassHandler('sg-navigating'),
     provideSgConfig(),
   ],
 })

apps/styleguide/src/routes/routes.const.ts

@@ -9,7 +9,7 @@ import { SgSvgComponent } from './sg-svg/sg-svg.component'
 import { SgTextAreaAutosizeComponent } from './sg-textarea-autosize/sg-text-area-autosize.component'
 import { SgTooltipComponent } from './sg-tooltip/sg-tooltip.component'
 
-export const SUB_ROUTES: Routes = [
+export const SUB_ROUTES = [
   { path: 'button', component: SgButtonComponent, title: 'Button' },
   { path: 'smooth-height', component: SgSmoothHeightComponent, title: 'Smooth Height' },
   { path: 'tooltip', component: SgTooltipComponent, title: 'Tooltip' },
@@ -19,9 +19,11 @@ export const SUB_ROUTES: Routes = [
   { path: 'local-storage', component: SgLocalStorageComponent, title: 'LocalStorage' },
   { path: 'click-outside', component: SgClickOutsideComponent, title: 'ClickOutside' },
   { path: 'rx', component: SgRxComponent, title: 'RX' },
-]
 
-export const ROUTES: Routes = [
+  { path: 'just-a-test-route', title: 'Test', loadChildren: () => import('./sg-test-page/sg-test-page.routes') },
+] satisfies Routes
+
+export const ROUTES = [
   {
     path: 'styleguide',
     children: [
@@ -30,4 +32,4 @@ export const ROUTES: Routes = [
     ],
   },
   { path: '**', redirectTo: 'styleguide' },
-]
+] satisfies Routes

apps/styleguide/src/routes/sg-test-page/sg-test-page-create-query-params.function.ts

@@ -0,0 +1,8 @@
+import { SgTestRouteQueryParams } from './sg-test-route-query-params.enum'
+
+export function sgTestPageCreateQueryParams(delay: number, disallow: boolean = false)  {
+  return {
+    [SgTestRouteQueryParams.DELAY]: delay,
+    [SgTestRouteQueryParams.DISALLOW]: disallow,
+  }
+}

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.html

@@ -0,0 +1,11 @@
+<h1>Test Route (Sub 1)</h1>
+<p>set query params to change the behavior of the can activate guard:</p>
+<ul>
+  <li>
+    <a [routerLink]="['../2']" [queryParams]="qp(5000)">delay by 5s, then allow</a>
+  </li>
+  <li>
+    <a [routerLink]="['../2']" [queryParams]="qp(2000,true)">delay by 2s, then disallow</a>
+  </li>
+</ul>
+

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  h1 { font-size: 20px; line-height: 32px;}
+}

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { sgTestPageCreateQueryParams } from '../sg-test-page-create-query-params.function'
+import { SgTestRouteQueryParams } from '../sg-test-route-query-params.enum'
+
+@Component({
+  selector: 'sg-test-page-sub-2',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './sg-test-page-sub-1.component.html',
+  styleUrls: ['./sg-test-page-sub-1.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SgTestPageSub1Component {
+  protected readonly qp = sgTestPageCreateQueryParams
+}

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.html

@@ -0,0 +1,8 @@
+<h1>Test Route Sub 2</h1>
+<p>set query params to change the behavior of the can activate guard:</p>
+<hr>
+<a [routerLink]="['../1']" [queryParams]="qp(5000)">delay by 5s, then allow</a>
+<hr>
+<a [routerLink]="['../1']" [queryParams]="qp(2000, true)">delay by 2s, then disallow</a>
+<hr>
+

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  h1 { font-size: 20px; line-height: 32px;}
+}

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { sgTestPageCreateQueryParams } from '../sg-test-page-create-query-params.function'
+
+@Component({
+  selector: 'sg-test-page-sub-2',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './sg-test-page-sub-2.component.html',
+  styleUrls: ['./sg-test-page-sub-2.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SgTestPageSub2Component {
+  protected readonly qp = sgTestPageCreateQueryParams
+}

apps/styleguide/src/routes/sg-test-page/sg-test-page.routes.ts

@@ -0,0 +1,27 @@
+import { CanActivateFn, Routes } from '@angular/router'
+import { SgTestPageSub1Component } from './sg-test-page-sub-1/sg-test-page-sub-1.component'
+import { SgTestPageSub2Component } from './sg-test-page-sub-2/sg-test-page-sub-2.component'
+import { SgTestRouteQueryParams } from './sg-test-route-query-params.enum'
+
+const canActivateByQueryParam: CanActivateFn = async (ars) => {
+  const delay = Number(ars.queryParams[SgTestRouteQueryParams.DELAY] ?? 0)
+  const disallow = ars.queryParams[SgTestRouteQueryParams.DISALLOW] === 'true'
+  await new Promise((resolve) => setTimeout(resolve, delay))
+  return !disallow
+}
+
+
+const ROUTES: Routes = [
+  {
+    path: '',
+    runGuardsAndResolvers: 'always',
+    canActivateChild: [canActivateByQueryParam],
+    children: [
+      { path: '', pathMatch: 'full', redirectTo: '1' },
+      { path: '1', component: SgTestPageSub1Component },
+      { path: '2', component: SgTestPageSub2Component },
+    ],
+  },
+]
+
+export default ROUTES

apps/styleguide/src/routes/sg-test-page/sg-test-route-query-params.enum.ts

@@ -0,0 +1,4 @@
+export enum SgTestRouteQueryParams {
+  DELAY = 'delay',
+  DISALLOW = 'DISALLOW',
+}

apps/styleguide/src/styles.scss

@@ -15,6 +15,10 @@ html, body {
   font-family: "Helvetica Neue", sans-serif;
 }
 
+body.sg-navigating *{
+  cursor: wait !important;
+}
+
 *:focus {
   outline: none;
 }
@@ -33,7 +37,6 @@ html, body {
   --sc-tooltip-line-height: 14px;
   --sc-tooltip-notch-size: 12px;
   --sc-tooltip-padding: 16px;
-  --sc-tooltip-filter: drop-shadow(0 0 1px #ccc) drop-shadow(0 16px 16px rgba(13, 27, 41, 0.08))
-  drop-shadow(0 8px 8px rgba(13, 27, 41, 0.08));
+  --sc-tooltip-filter: drop-shadow(0 0 1px #ccc) drop-shadow(0 16px 16px rgba(13, 27, 41, 0.08)) drop-shadow(0 8px 8px rgba(13, 27, 41, 0.08));
 
 }