From d5319011d9e43e1d440522605a0a5116e48dfc5f Mon Sep 17 00:00:00 2001
From: Simon Mumenthaler <simon.mumenthaler@shiftcode.ch>
Date: Mon, 5 Feb 2024 09:13:35 +0100
Subject: [PATCH] feat(navigation-class-handler): styleguide page

---
 apps/styleguide/src/main.ts                   |  2 ++
 apps/styleguide/src/routes/routes.const.ts    | 10 ++++---
 ...-test-page-create-query-params.function.ts |  8 ++++++
 .../sg-test-page-sub-1.component.html         | 11 ++++++++
 .../sg-test-page-sub-1.component.scss         |  4 +++
 .../sg-test-page-sub-1.component.ts           | 16 +++++++++++
 .../sg-test-page-sub-2.component.html         |  8 ++++++
 .../sg-test-page-sub-2.component.scss         |  4 +++
 .../sg-test-page-sub-2.component.ts           | 15 +++++++++++
 .../sg-test-page/sg-test-page.routes.ts       | 27 +++++++++++++++++++
 .../sg-test-route-query-params.enum.ts        |  4 +++
 apps/styleguide/src/styles.scss               |  7 +++--
 12 files changed, 110 insertions(+), 6 deletions(-)
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page-create-query-params.function.ts
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.html
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.scss
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.ts
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.html
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.scss
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.ts
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-page.routes.ts
 create mode 100644 apps/styleguide/src/routes/sg-test-page/sg-test-route-query-params.enum.ts

diff --git a/apps/styleguide/src/main.ts b/apps/styleguide/src/main.ts
index 997df76..7001704 100644
--- a/apps/styleguide/src/main.ts
+++ b/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(),
   ],
 })
diff --git a/apps/styleguide/src/routes/routes.const.ts b/apps/styleguide/src/routes/routes.const.ts
index ff840c6..0281862 100644
--- a/apps/styleguide/src/routes/routes.const.ts
+++ b/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
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page-create-query-params.function.ts b/apps/styleguide/src/routes/sg-test-page/sg-test-page-create-query-params.function.ts
new file mode 100644
index 0000000..c8c48ef
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.html b/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.html
new file mode 100644
index 0000000..c2b09be
--- /dev/null
+++ b/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>
+
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.scss b/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.scss
new file mode 100644
index 0000000..1f0ff6d
--- /dev/null
+++ b/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;}
+}
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.ts b/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.ts
new file mode 100644
index 0000000..33ebcec
--- /dev/null
+++ b/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
+}
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.html b/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.html
new file mode 100644
index 0000000..2a66db1
--- /dev/null
+++ b/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>
+
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.scss b/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.scss
new file mode 100644
index 0000000..1f0ff6d
--- /dev/null
+++ b/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;}
+}
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.ts b/apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.ts
new file mode 100644
index 0000000..167dc81
--- /dev/null
+++ b/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
+}
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-page.routes.ts b/apps/styleguide/src/routes/sg-test-page/sg-test-page.routes.ts
new file mode 100644
index 0000000..96e8214
--- /dev/null
+++ b/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
diff --git a/apps/styleguide/src/routes/sg-test-page/sg-test-route-query-params.enum.ts b/apps/styleguide/src/routes/sg-test-page/sg-test-route-query-params.enum.ts
new file mode 100644
index 0000000..b6797a9
--- /dev/null
+++ b/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',
+}
diff --git a/apps/styleguide/src/styles.scss b/apps/styleguide/src/styles.scss
index 4397019..c2962f0 100644
--- a/apps/styleguide/src/styles.scss
+++ b/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));
 
 }