test(angular): add split pane test

Author: brandyscarney

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -19,6 +19,14 @@ export const routes: Routes = [
       { path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(c => c.OverlayControllersComponent) },
       { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) },
       { path: 'icon', loadComponent: () => import('../icon/icon.component').then(c => c.IconComponent) },
+      { path: 'split-pane', redirectTo: '/standalone/split-pane/inbox', pathMatch: 'full' },
+      {
+        path: 'split-pane',
+        loadComponent: () => import('../split-pane/split-pane.component').then(c => c.SplitPaneComponent),
+        children: [
+          { path: ':id', loadComponent: () => import('../split-pane/split-pane-page.component').then(c => c.SplitPanePageComponent) },
+        ]
+      },
       { path: 'tabs', redirectTo: '/standalone/tabs/tab-one', pathMatch: 'full' },
       {
         path: 'tabs',

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -49,6 +49,11 @@
         Router Outlet Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/split-pane">
+      <ion-label>
+        Split Pane Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/tabs">
       <ion-label>
         Tabs Test

packages/angular/test/base/src/app/standalone/split-pane/split-pane-page.component.html

@@ -0,0 +1,23 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>{{ folder }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">{{ folder }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div id="container">
+    <ion-button (click)="onClick('one')">Button One</ion-button>
+    <ion-button (click)="onClick('two')">Button Two</ion-button>
+    <ion-button (click)="onClick('three')">Button Three</ion-button>
+    <ion-button (click)="onClick('four')">Button Four</ion-button>
+  </div>
+</ion-content>

packages/angular/test/base/src/app/standalone/split-pane/split-pane-page.component.ts

@@ -0,0 +1,24 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-split-pane-page',
+  templateUrl: './split-pane-page.component.html',
+  imports: [ IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonTitle, IonToolbar ],
+  standalone: true,
+})
+export class SplitPanePageComponent implements OnInit {
+  public folder!: string;
+  private activatedRoute = inject(ActivatedRoute);
+
+  constructor() {}
+
+  ngOnInit() {
+    this.folder = this.activatedRoute.snapshot.paramMap.get('id') as string;
+  }
+
+  onClick(val: string) {
+    console.log(val);
+  }
+}

packages/angular/test/base/src/app/standalone/split-pane/split-pane.component.css

@@ -0,0 +1,3 @@
+ion-item.selected {
+  --background: rgb(var(--ion-color-primary-rgb, 0, 84, 233), 0.14);
+}

packages/angular/test/base/src/app/standalone/split-pane/split-pane.component.html

@@ -0,0 +1,22 @@
+<ion-split-pane contentId="main-content" when="xs">
+  <ion-menu contentId="main-content" type="overlay">
+    <ion-content>
+      <ion-list id="inbox-list">
+        <ion-list-header>Inbox</ion-list-header>
+
+        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
+          <ion-item
+            routerDirection="root"
+            [routerLink]="[p.url]"
+            lines="none"
+            detail="false"
+            routerLinkActive="selected"
+          >
+            <ion-label>{{ p.title }}</ion-label>
+          </ion-item>
+        </ion-menu-toggle>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+  <ion-router-outlet id="main-content"></ion-router-outlet>
+</ion-split-pane>

packages/angular/test/base/src/app/standalone/split-pane/split-pane.component.ts

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import {
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonMenu,
+  IonMenuToggle,
+  IonRouterLink,
+  IonRouterOutlet,
+  IonSplitPane
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-split-pane',
+  templateUrl: 'split-pane.component.html',
+  styleUrl: 'split-pane.component.css',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonContent,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonMenu,
+    IonMenuToggle,
+    IonRouterLink,
+    IonRouterOutlet,
+    IonSplitPane,
+    RouterLink,
+    RouterLinkActive,
+  ],
+})
+export class SplitPaneComponent {
+  public appPages = [
+    { title: 'Inbox', url: '/standalone/split-pane/inbox' },
+    { title: 'Outbox', url: '/standalone/split-pane/outbox' },
+    { title: 'Favorites', url: '/standalone/split-pane/favorites' },
+    { title: 'Archived', url: '/standalone/split-pane/archived' },
+    { title: 'Trash', url: '/standalone/split-pane/trash' },
+    { title: 'Spam', url: '/standalone/split-pane/spam'}
+  ];
+
+  constructor() { }
+}