adding routing pages to different components

package.json

@@ -20,6 +20,7 @@
     "@angular/router": "~12.1.2",
     "query-selector-shadow-dom": "^1.0.1",
     "rxjs": "~6.6.0",
+    "stenciljs-components": "^1.0.13",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
@@ -35,6 +36,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.3.2"
+    "typescript": "~4.3.5"
   }
 }

src/app/app-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { WrapperEditorComponent } from './wrapper-editor/wrapper-editor.component';
+import { FluidParentComponent } from './fluid-parent/fluid-parent.component';
+import { LibraryComponentsComponent } from './library-components/library-components.component';
+import { TestPagesComponent } from './test-pages/test-pages.component';
+import { AuthGuard } from './auth.guard';
+
+const routes: Routes = [
+  { path: '', component: TestPagesComponent }, // Default route
+  { path: 'text-editor', component: WrapperEditorComponent },
+  { path: 'fluid-form', component: FluidParentComponent,canActivate: [AuthGuard] },
+  { path: 'library-components', component: LibraryComponentsComponent },
+  { path: 'fluid-card', component: TestPagesComponent },
+  { path: '**', redirectTo: '', pathMatch: 'full' } // Fallback route
+];
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forRoot(routes)
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,14 +1,10 @@
-<div>Angular Application with StencilJS web components</div>
-<h1>from local running stencilJS app</h1>    
-<app-wrapper-editor></app-wrapper-editor>
-<test-button>Click!</test-button>
-
-<test-counter></test-counter>
-
-<div *ngIf="this.innerText">{{ this.innerText }}</div>
-
-<fluid-card title="" collapsible="false" remove-header-border>
-  <!-- Your FLUID Components Here! -->
-  <fluid-datepicker [validation]="validation"> </fluid-datepicker>
-</fluid-card>
-<app-fluid-parent></app-fluid-parent>
+
+<h1>navigation links</h1>    
+<nav style="display: flex; flex-direction: column; gap: 10px;">
+  <a routerLink="/" routerLinkActive="active">Home</a>
+  <a routerLink="/fluid-form" routerLinkActive="active">FLUID Form</a>
+  <a routerLink="/text-editor" routerLinkActive="active">Editor</a>
+  <a routerLink="/library-components" routerLinkActive="active">LibraryComponents</a>
+  <a routerLink="/fluid-card" routerLinkActive="active">FLUID Card</a>
+</nav>
+<router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,11 @@
+nav {
+    display: flex;
+    flex-direction: column;
+    gap: 15px; /* Space between links */
+  }
+
+  nav a {
+    text-decoration: none;
+    color: inherit;
+  }
+

src/app/app.component.ts

@@ -1,5 +1,4 @@
-import { Component, HostListener, EventEmitter,Output } from '@angular/core';
-import { fluid } from '../main';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -8,24 +7,9 @@ import { fluid } from '../main';
 })
 export class AppComponent {
 
-  innerText: string | undefined;
-
-  validation = [
-    {
-      type: 'custom',
-      validatorFn: (value: any) => {
-        return value === '2023-05-23';
-      },
-      message: 'The value must 2023-05-23',
-    },
-  ];
 
 
-  @HostListener('buttonClicked', ['$event'])
-  buttonClickHandler(event: any) {
-    console.log(event);
-    this.innerText = `Button clicked was: ${event.detail.id}`;
-  }
+
 
 
 }

src/app/app.module.ts

@@ -5,15 +5,21 @@ import { DatePipe } from '@angular/common';
 import { AppComponent } from './app.component';
 import { WrapperEditorComponent } from './wrapper-editor/wrapper-editor.component';
 import { FluidParentComponent } from './fluid-parent/fluid-parent.component';
+import { AppRoutingModule } from './app-routing.module';
+import { LibraryComponentsComponent } from './library-components/library-components.component';
+import { TestPagesComponent } from './test-pages/test-pages.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     WrapperEditorComponent,
-    FluidParentComponent
+    FluidParentComponent,
+    LibraryComponentsComponent,
+    TestPagesComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AppRoutingModule
   ],
   providers: [DatePipe],
   bootstrap: [AppComponent],

src/app/auth.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/auth.guard.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }
+
+}

src/app/library-components/library-components.component.html

@@ -0,0 +1,16 @@
+<p>library-components works!</p>
+<h1>from 'stenciljs-components' npm package</h1>
+<my-card user-name="CodingLocker"></my-card>
+<my-pie-chart  data='[{"tag":"height","value":180},{"tag":"weight","value":75},{"tag":"age","value":30},{"tag":"score","value":95},{"tag":"yearsExperience","value":5}]'></my-pie-chart>
+<my-rich-text-editor initial-value="this is initial value" placeholder="angular placeholder" font-family="Arial" font-size="26pt"></my-rich-text-editor>
+<my-progress-bar value="2" max="10"></my-progress-bar>
+<my-progress-ring percentage="30"></my-progress-ring>
+<test-button button-id="test-button">Click me!</test-button>
+<test-counter>Number: </test-counter>
+<search-world search-text="bmw"> </search-world>
+<my-payment-gateway></my-payment-gateway>
+<my-component first="Sanjeet" last="Kumar"></my-component>
+<combo-box [allowInput]="true"></combo-box>
+<custom-form></custom-form>
+<custom-text-input name="my-custom-input"  form-associated></custom-text-input>
+<my-button text="Angular Button" (myEvent)="buttonClick($event)"><h5>Hello World</h5></my-button>

src/app/library-components/library-components.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibraryComponentsComponent } from './library-components.component';
+
+describe('LibraryComponentsComponent', () => {
+  let component: LibraryComponentsComponent;
+  let fixture: ComponentFixture<LibraryComponentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LibraryComponentsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LibraryComponentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/library-components/library-components.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-library-components',
+  templateUrl: './library-components.component.html',
+  styleUrls: ['./library-components.component.scss']
+})
+export class LibraryComponentsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  buttonClick(e:any) {
+    console.log('custom event', e)
+  }
+}

src/app/test-pages/test-pages.component.html

@@ -0,0 +1,13 @@
+<p>test-pages works!</p>
+<fluid-card title="" collapsible="false" remove-header-border>
+    <!-- Your FLUID Components Here! -->
+    <fluid-datepicker [validation]="validation"> </fluid-datepicker>
+  </fluid-card>
+
+<test-button>Click!</test-button>
+
+<test-counter></test-counter>
+
+<div *ngIf="this.innerText">{{ this.innerText }}</div>
+
+

src/app/test-pages/test-pages.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestPagesComponent } from './test-pages.component';
+
+describe('TestPagesComponent', () => {
+  let component: TestPagesComponent;
+  let fixture: ComponentFixture<TestPagesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TestPagesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestPagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test-pages/test-pages.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit ,HostListener, EventEmitter,Output} from '@angular/core';
+import { fluid } from '../../main';
+
+@Component({
+  selector: 'app-test-pages',
+  templateUrl: './test-pages.component.html',
+  styleUrls: ['./test-pages.component.scss']
+})
+export class TestPagesComponent implements OnInit {
+  innerText: string | undefined;
+
+  validation = [
+    {
+      type: 'custom',
+      validatorFn: (value: any) => {
+        return value === '2023-05-23';
+      },
+      message: 'The value must 2023-05-23',
+    },
+  ];
+  @HostListener('buttonClicked', ['$event'])
+  buttonClickHandler(event: any) {
+    console.log(event);
+    this.innerText = `Button clicked was: ${event.detail.id}`;
+  }
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/wrapper-editor/wrapper-editor.component.html

@@ -1,4 +1,4 @@
-<h1>Angular App with StencilJS Editor</h1>
+<h1>Angular App with Localhost StencilJS Editor</h1>
 <custom-rtf #editorComponent
 [initialvalue]="initialvalue" 
 disable-quickbars="isQuickBarsDisabled"

src/index.html

@@ -6,8 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <script type="module" src="http://localhost:3333/build/my-first-stencil-project.esm.js"></script>
-  <script nomodule src="http://localhost:3333/build/my-first-stencil-project.js"></script>
+  <!-- <script type="module" src="http://localhost:3333/build/my-first-stencil-project.esm.js"></script>
+  <script nomodule src="http://localhost:3333/build/my-first-stencil-project.js"></script> -->
 </head>
 <body>
   <app-root></app-root>

src/main.ts

@@ -3,7 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-//import { defineCustomElements } from 'stenciljs-cop/loader';
+import { defineCustomElements } from 'stenciljs-components/loader';
 //add stencil local in new file
 import { fluidEnvironments } from '../fluid';
 
@@ -13,7 +13,7 @@ if (environment.production) {
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));
-//defineCustomElements();
+defineCustomElements();
 
 const script = document.createElement('script');
 

tsconfig.json

@@ -7,6 +7,7 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
+    "skipLibCheck": true,
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,