gcp-material-ui 0.0.4

package/Dockerfile

@@ -0,0 +1,14 @@
+# Build stage
+FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+COPY --from=build /app/dist/components/browser /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

package/PUBLISH_GUIDE.md

@@ -0,0 +1,33 @@
+# Publishing Guide for gcp-material-ui
+
+This document describes how to publish new versions of `gcp-material-ui` to npm.
+
+## Prerequisites
+
+1.  **npm account**: You need a valid npm account.
+2.  **Access rights**: You need publish access to the package scope (if using one).
+3.  **Authentication**: Run `npm login` before running the publish script if you are not already logged in.
+
+## Step-by-step Guide
+
+### 1. Make Changes
+Make your changes to the components, styles, or variables in the `src/` directory.
+
+### 2. Verify Changes
+Run `npm run build` (or `npm run start` for dev) to ensure there are no compilation errors.
+
+### 3. Publish
+
+Run the provided `publish.sh` script to bump version and publish:
+
+```bash
+cd gcp-material-ui
+./publish.sh [patch|minor|major]
+```
+
+- Leaving it blank defaults to a **patch** version bump (0.0.1 -> 0.0.2).
+- Specify `minor` for new features (0.1.0).
+- Specify `major` for breaking changes (1.0.0).
+
+> [!NOTE]
+> The script disables standard git tag creation so it won't pollute the root monorepo history as it's a nested sub-folder package. To commit `package.json` changes, do it manually for the monorepo.

package/README.md

@@ -0,0 +1,48 @@
+## 🧩 Component Demos
+
+This repository contains a rich set of shared component demos showcasing standard Material 3 usage and best practices.
+
+Explore the following directories in `src/app/components`:
+
+- `buttons`, `charts`, `chips`, `dialog`, `expansion`, `forms`, `message`, `page`, `sidebar`, `stepper`, `tables`, `tabs`, `toolbars`, `workflow-graph`
+
+To run the application locally and explore demos:
+
+```bash
+ng serve
+```
+
+## 📄 Page Templates
+
+The project includes pre-built page templates for common UI workflows (GCP-style):
+
+- `complex-form`: Advanced multi-input forms
+- `firewall-list`: Tabular listing with filters
+- `firewall-add`: Left-aligned creation forms
+- `firewall-details`: Immersive detail views
+
+## 🎨 Shared Styling & Variables
+
+You can use this workspace as a central design system in other apps via local linking.
+
+### How to use in other apps:
+
+1. **Add Dependency**: In your consumer app's `package.json`:
+
+   ```json
+   "dependencies": {
+     "components": "file:../components"
+   }
+   ```
+
+2. **Run Sync**: Run `npm install` to symlink.
+
+3. **Import System**:
+
+   ```scss
+   // Global themes and reset
+   @use 'components/styles';
+
+   // Just variables (no CSS duplication)
+   @use 'components/variables' as theme;
+   ```

package/angular.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "components": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2MB",
+                  "maximumError": "3MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "5MB",
+                  "maximumError": "10MB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "components:build:production"
+            },
+            "development": {
+              "buildTarget": "components:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

package/deploy.sh

@@ -0,0 +1,47 @@
+#!/bin/bash
+
+# Exit on error
+set -e
+
+# Configuration
+PROJECT_ID="cn-fe-ai-apps"
+APP_NAME=$(basename "$PWD")
+# Use hyphens instead of underscores for Cloud Run service name compliance if needed, 
+# but user specifically asked for "root folder of this application" (e.g. react_oauth_template).
+# Cloud Run names must use only lowercase letters, numbers, and hyphens. 
+# So react_oauth_template might be invalid if it contains underscores.
+# I will auto-convert underscores to hyphens to be safe, or I should check validation.
+# Cloud Run Service naming: "only lowercase letters, numbers, and hyphens".
+# So react_oauth_template MUST be converted to react-oauth-template.
+SANITIZED_APP_NAME=$(echo "$APP_NAME" | tr '_' '-' | tr '[:upper:]' '[:lower:]')
+
+IMAGE_NAME="gcr.io/$PROJECT_ID/$SANITIZED_APP_NAME"
+REGION="us-central1"
+
+echo "========================================================"
+echo "Deploying $APP_NAME (as service: $SANITIZED_APP_NAME)"
+echo "Project: $PROJECT_ID"
+echo "Region:  $REGION"
+echo "========================================================"
+
+# 1. Set Project
+echo "Setting project to $PROJECT_ID..."
+gcloud config set project "$PROJECT_ID"
+
+# 2. Build
+echo "Submitting build..."
+gcloud builds submit --tag "$IMAGE_NAME" .
+
+# 3. Deploy
+echo "Deploying to Cloud Run..."
+gcloud run deploy "$SANITIZED_APP_NAME" \
+  --image "$IMAGE_NAME" \
+  --platform managed \
+  --region "$REGION" \
+  --allow-unauthenticated
+
+echo "========================================================"
+echo "Deployment Complete!"
+echo "Service URL:"
+gcloud run services describe "$SANITIZED_APP_NAME" --platform managed --region "$REGION" --format 'value(status.url)'
+echo "========================================================"

package/nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen 8080;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "gcp-material-ui",
+  "version": "0.0.4",
+  "scripts": {
+    "ng": "ng",
+    "deploy": "./deploy.sh",
+    "publish": "./publish.sh",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": false,
+  "exports": {
+    "./styles": "./src/styles.scss",
+    "./variables": "./src/_variables.scss",
+    "./page": "./src/app/components/page/page.ts"
+  },
+  "packageManager": "npm@10.9.3",
+  "dependencies": {
+    "@angular/animations": "^21.2.4",
+    "@angular/cdk": "^21.2.2",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/material": "^21.2.2",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@google/workflow-graph": "^0.1.2",
+    "@ngstack/code-editor": "^9.0.0",
+    "angular-oauth2-oidc": "^20.0.2",
+    "chart.js": "^4.5.1",
+    "ng2-charts": "^10.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "^0.16.1"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.2.2",
+    "@angular/cli": "^21.2.2",
+    "@angular/compiler-cli": "^21.2.0",
+    "jsdom": "^28.0.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

package/public/google-cloud-combined.svg

@@ -0,0 +1 @@
+<svg data-name="Google Cloud logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138.35 24"><path d="M89.75 18.62A8.36 8.36 0 0 1 81.2 10a8.33 8.33 0 0 1 2.43-6.1 8.25 8.25 0 0 1 6.12-2.48 7.62 7.62 0 0 1 6 2.69l-1.47 1.47a5.64 5.64 0 0 0-4.53-2.14 6.22 6.22 0 0 0-4.57 1.84A6.38 6.38 0 0 0 83.36 10a6.38 6.38 0 0 0 1.82 4.74 6.18 6.18 0 0 0 4.57 1.84 6.44 6.44 0 0 0 5-2.42l1.54 1.5a8 8 0 0 1-2.87 2.17 8.67 8.67 0 0 1-3.67.79Zm10.37-16.83v16.47H98V1.79Zm1.82 10.83a6 6 0 0 1 1.64-4.3 5.57 5.57 0 0 1 4.16-1.7 5.51 5.51 0 0 1 4.14 1.7 5.92 5.92 0 0 1 1.65 4.3 5.87 5.87 0 0 1-1.65 4.3 5.47 5.47 0 0 1-4.14 1.7 5.53 5.53 0 0 1-4.16-1.7 6 6 0 0 1-1.64-4.3Zm2.12 0a4.1 4.1 0 0 0 1.06 2.94 3.6 3.6 0 0 0 5.24 0 4.1 4.1 0 0 0 1.06-2.94 4.07 4.07 0 0 0-1.06-2.92 3.56 3.56 0 0 0-5.24 0 4.07 4.07 0 0 0-1.06 2.92Zm21.17 5.64h-2v-1.57h-.1a3.75 3.75 0 0 1-1.48 1.38 4.23 4.23 0 0 1-2.08.55 4.18 4.18 0 0 1-3.19-1.18 4.74 4.74 0 0 1-1.11-3.37V7h2.11v6.94a2.49 2.49 0 0 0 2.79 2.76 2.63 2.63 0 0 0 2.11-1 3.69 3.69 0 0 0 .85-2.45V7h2.12Zm7.16.36a5 5 0 0 1-3.79-1.74 6.24 6.24 0 0 1-1.6-4.26 6.2 6.2 0 0 1 1.56-4.25 4.94 4.94 0 0 1 3.79-1.75 4.78 4.78 0 0 1 2.27.53 4 4 0 0 1 1.58 1.4h.09L136.24 7V1.79h2.11v16.47h-2v-1.57h-.09a4 4 0 0 1-1.58 1.4 4.78 4.78 0 0 1-2.29.53Zm.35-1.93a3.21 3.21 0 0 0 2.55-1.13 4.17 4.17 0 0 0 1-2.94 4.21 4.21 0 0 0-1-2.92 3.23 3.23 0 0 0-2.55-1.15 3.29 3.29 0 0 0-2.55 1.15 4.21 4.21 0 0 0-1 2.92 4.14 4.14 0 0 0 1 2.92 3.29 3.29 0 0 0 2.55 1.15Z" style="fill:#5f6368"/><g data-name="75x24px"><path d="M9.49 18.62A9.46 9.46 0 0 1 0 9.31 9.46 9.46 0 0 1 9.49 0a8.91 8.91 0 0 1 6.41 2.57l-1.81 1.79a6.51 6.51 0 0 0-4.6-1.82 6.69 6.69 0 0 0-6.71 6.77 6.69 6.69 0 0 0 6.71 6.77 6.25 6.25 0 0 0 4.72-1.87A5.26 5.26 0 0 0 15.6 11H9.49V8.47h8.6a8.38 8.38 0 0 1 .13 1.59A8.37 8.37 0 0 1 16 16a8.57 8.57 0 0 1-6.51 2.62Z" style="fill:#4285f4"/><path d="M31.52 12.62a5.94 5.94 0 1 1-11.87 0 5.94 5.94 0 1 1 11.87 0Zm-2.6 0a3.35 3.35 0 1 0-6.67 0 3.35 3.35 0 1 0 6.67 0Z" style="fill:#ea4335"/><path d="M44.83 12.62a5.94 5.94 0 1 1-11.87 0 5.94 5.94 0 1 1 11.87 0Zm-2.6 0a3.35 3.35 0 1 0-6.68 0 3.35 3.35 0 1 0 6.68 0Z" style="fill:#fbbc04"/><path d="M57.8 7v10.76c0 4.42-2.63 6.24-5.73 6.24a5.75 5.75 0 0 1-5.34-3.54l2.31-1a3.32 3.32 0 0 0 3 2.14c2 0 3.22-1.23 3.22-3.52v-.86h-.06a4.16 4.16 0 0 1-3.2 1.4 6 6 0 0 1 0-12A4.22 4.22 0 0 1 55.2 8h.09V7Zm-2.33 5.66A3.39 3.39 0 0 0 52.25 9a3.48 3.48 0 0 0-3.35 3.66 3.45 3.45 0 0 0 3.35 3.61 3.35 3.35 0 0 0 3.22-3.62Z" style="fill:#4285f4"/><path d="M62.43.64v17.62h-2.64V.64Z" style="fill:#34a853"/><path d="m72.83 14.6 2.06 1.4a6 6 0 0 1-5 2.66 5.81 5.81 0 0 1-5.89-6 5.52 5.52 0 0 1 10.75-2.18l.27.69-8 3.31a3.07 3.07 0 0 0 2.92 1.82 3.44 3.44 0 0 0 2.89-1.7Zm-6.31-2.16 5.38-2.22A2.34 2.34 0 0 0 69.66 9a3.29 3.29 0 0 0-3.14 3.44Z" style="fill:#ea4335"/></g></svg>

package/publish.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+set -e
+
+VERSION_TYPE=${1:-patch}
+
+echo "Bumping version ($VERSION_TYPE) without git tag..."
+npm version "$VERSION_TYPE" --no-git-tag-version
+
+echo "Publishing to npm..."
+# Using --access public ensures it is published publicly (change if needed for private scope)
+npm publish --access public
+
+echo "✅ Published successfully!"

package/src/_variables.scss

@@ -0,0 +1,183 @@
+@use '@angular/material' as mat;
+@use 'sass:math';
+
+// --- Local Utilities ---
+@function px-to-rem($px) {
+  @return math.div($px, 16) * 1rem;
+}
+
+// --- GM2 Palette: White/Black ---
+$white: #fff;
+$black: #000;
+
+// --- GM2 Palette: Grey ---
+$grey50: #f8f9fa;
+$grey100: #f1f3f4;
+$grey200: #e8eaed;
+$grey300: #dadce0;
+$grey400: #bdc1c6;
+$grey500: #9aa0a6;
+$grey600: #80868b;
+$grey700: #5f6368;
+$grey800: #3c4043;
+$grey900: #202124;
+$grey1000: #131314;
+$grey1100: #000;
+
+// --- GM2 Brand Palette: Blue ---
+$blue50: #e8f0fe;
+$blue100: #d2e3fc;
+$blue200: #aecbfa;
+$blue300: #8ab4f8;
+$blue400: #669df6;
+$blue500: #4285f4;
+$blue600: #0c67df;
+$blue700: #1967d2;
+$blue800: #185abc;
+$blue900: #174ea6;
+$blue1000: #16427f;
+$blue1100: #153258;
+$blue1200: #14243a;
+
+// --- GM2 Brand Palette: Green ---
+$green50: #e6f4ea;
+$green100: #ceead6;
+$green600: #1e8e3e;
+$green700: #137333;
+
+// --- GM2 Brand Palette: Yellow ---
+$yellow50: #fef7e0;
+$yellow100: #feefc3;
+$yellow600: #f9ab00;
+$yellow700: #ea8600;
+
+// --- GM2 Brand Palette: Red ---
+$red50: #fce8e6;
+$red100: #fad2cf;
+$red200: #f6aea9;
+$red300: #f28b82;
+$red400: #ee675c;
+$red500: #ea4335;
+$red600: #d93025;
+$red700: #c5221f;
+$red800: #b31412;
+$red900: #a50e0e;
+$red1000: #771b1a;
+$red1100: #521c19;
+$red1200: #371817;
+
+// LINT.IfChange
+// --- Local Typography Setup ---
+$_cm-ref-gm2-type-family-display: ('Google Sans', sans-serif);
+$_cm-ref-gm2-type-family-body: ('Roboto', sans-serif);
+$_font-weight-regular: 400;
+$_font-weight-medium: 500;
+
+// --- Compound M3 Palette Definition ---
+$my-m3-palette: (
+  0: #000000,
+  10: $blue900,
+  20: $blue800,
+  25: $blue700,
+  30: $blue700,
+  35: $blue600,
+  40: $blue600,
+  50: $blue500,
+  60: $blue400,
+  70: $blue300,
+  80: $blue200,
+  90: $blue100,
+  95: $blue50,
+  98: $grey50,
+  99: #ffffff,
+  100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: $blue900,
+    20: $blue800,
+    25: $blue700,
+    30: $blue700,
+    35: $blue600,
+    40: $blue600,
+    50: $blue500,
+    60: $blue400,
+    70: $blue300,
+    80: $blue200,
+    90: $blue100,
+    95: $blue50,
+    98: $grey50,
+    99: #ffffff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: $grey900,
+    20: $grey800,
+    25: $grey700,
+    30: $grey700,
+    35: $grey600,
+    40: $grey600,
+    50: $grey500,
+    60: $grey400,
+    70: $grey300,
+    80: $grey200,
+    90: $grey100,
+    95: $grey50,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: $grey900,
+    20: $grey800,
+    25: $grey700,
+    30: $grey700,
+    35: $grey600,
+    40: $grey600,
+    50: $grey500,
+    60: $grey400,
+    70: $grey300,
+    80: $grey200,
+    90: $grey100,
+    95: $grey50,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+// --- M3 Theme Definition ---
+$my-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: $my-m3-palette,
+    ),
+    typography: (
+      plain-family: $_cm-ref-gm2-type-family-body,
+      brand-family: $_cm-ref-gm2-type-family-display,
+      regular-weight: $_font-weight-regular,
+      medium-weight: $_font-weight-medium,
+      bold-weight: 700,
+    ),
+  )
+);

package/src/app/app.config.ts

@@ -0,0 +1,19 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+import { CodeEditorModule } from '@ngstack/code-editor';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideCharts(withDefaultRegisterables()),
+    provideAnimations(),
+    provideHttpClient(),
+    importProvidersFrom(CodeEditorModule.forRoot())
+  ]
+};

package/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

package/src/app/app.routes.ts

@@ -0,0 +1,65 @@
+import { Routes } from '@angular/router';
+import { LayoutComponent } from './layout/layout';
+import { FormsDemoComponent } from './demo-components/forms/forms-demo';
+import { TablesDemoComponent } from './demo-components/tables/tables-demo';
+import { ButtonsDemoComponent } from './demo-components/buttons/buttons-demo';
+import { ToolbarsDemoComponent } from './demo-components/toolbars/toolbars-demo';
+import { TabsDemoComponent } from './demo-components/tabs/tabs-demo';
+import { WorkflowGraphDemoComponent } from './demo-components/workflow-graph/workflow-graph-demo';
+import { ChartsDemoComponent } from './demo-components/charts/charts-demo';
+import { SidebarDemoComponent } from './demo-components/sidebar/sidebar-demo';
+import { ChipsDemoComponent } from './demo-components/chips/chips-demo';
+import { TypographyDemoComponent } from './demo-components/typography/typography-demo';
+import { ExpandButtonDemoComponent } from './demo-components/expand-button/expand-button-demo';
+import { SlideToggleDemoComponent } from './demo-components/slide-toggle/slide-toggle-demo';
+import { CodeSnippetDemoComponent } from './demo-components/code-snippet/code-snippet-demo';
+import { TooltipDemoComponent } from './demo-components/tooltip/tooltip-demo';
+import { CardDemoComponent } from './demo-components/card/card-demo';
+
+import { ExpansionDemoComponent } from './demo-components/expansion/expansion-demo';
+import { DialogDemoComponent } from './demo-components/dialog/dialog-demo';
+import { StepperDemoComponent } from './demo-components/stepper/stepper-demo';
+import { MessageDemoComponent } from './demo-components/message/message-demo';
+import { FirewallTemplateListComponent } from './page-templates/firewall-list/firewall-list';
+import { FirewallTemplateAddComponent } from './page-templates/firewall-add/firewall-add';
+import { FirewallTemplateDetailsComponent } from './page-templates/firewall-details/firewall-details';
+import { ComplexFormComponent } from './page-templates/complex-form/complex-form';
+import { authGuard } from './auth/auth.guard';
+import { DashboardComponent } from './dashboard/dashboard';
+
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: LayoutComponent,
+    canActivate: [authGuard],
+    children: [
+      { path: '', component: DashboardComponent },
+      { path: 'demo-components/forms', component: FormsDemoComponent },
+      { path: 'demo-components/tables', component: TablesDemoComponent },
+      { path: 'demo-components/buttons', component: ButtonsDemoComponent },
+      { path: 'demo-components/toolbars', component: ToolbarsDemoComponent },
+      { path: 'demo-components/tabs', component: TabsDemoComponent },
+      { path: 'demo-components/workflow-graph', component: WorkflowGraphDemoComponent },
+      { path: 'demo-components/charts', component: ChartsDemoComponent },
+      { path: 'demo-components/sidebar', component: SidebarDemoComponent },
+      { path: 'demo-components/chips', component: ChipsDemoComponent },
+      { path: 'demo-components/typography', component: TypographyDemoComponent },
+      { path: 'demo-components/expand-button', component: ExpandButtonDemoComponent },
+      { path: 'demo-components/slide-toggle', component: SlideToggleDemoComponent },
+      { path: 'demo-components/code-snippet', component: CodeSnippetDemoComponent },
+      { path: 'demo-components/tooltip', component: TooltipDemoComponent },
+      { path: 'demo-components/card', component: CardDemoComponent },
+      { path: 'demo-components/expansion', component: ExpansionDemoComponent },
+      { path: 'demo-components/dialog', component: DialogDemoComponent },
+      { path: 'demo-components/stepper', component: StepperDemoComponent },
+      { path: 'demo-components/message', component: MessageDemoComponent },
+      { path: 'templates/firewalls', component: FirewallTemplateListComponent },
+      { path: 'templates/firewalls/add', component: FirewallTemplateAddComponent },
+      { path: 'templates/firewalls/:id', component: FirewallTemplateDetailsComponent },
+      { path: 'templates/complex-form', component: ComplexFormComponent },
+
+    ]
+  }
+];
+

package/src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, components');
+  });
+});

package/src/app/app.ts

@@ -0,0 +1,12 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
+})
+export class App {
+  protected readonly title = signal('components');
+}

package/src/app/auth/auth.guard.ts

@@ -0,0 +1,7 @@
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from './auth.service';
+
+export const authGuard = async () => {
+  return true;
+};