feat: SplitView support

apps/nativescript-demo-ng/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ItemsComponent } from './item/items.component';
 import { ListViewStickyComponent } from './list-view-sticky/list-view-sticky.component';
+import { SPLIT_VIEW_ROUTES } from './split-view-demo/split-view.routes';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
@@ -15,6 +16,10 @@ export const routes: Routes = [
     path: 'list-view-sticky',
     component: ListViewStickyComponent,
   },
+  {
+    path: 'split-view-demo',
+    children: SPLIT_VIEW_ROUTES,
+  },
 
   /**
    * Test tab named outlets

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html

@@ -0,0 +1,13 @@
+<SplitView
+  displayMode="twoBesideSecondary"
+  splitBehavior="tile"
+  preferredPrimaryColumnWidthFraction="0.25"
+  preferredSupplementaryColumnWidthFraction="0.33"
+  preferredInspectorColumnWidthFraction="0.2"
+  (inspectorChange)="splitViewState.onInspectorChange($event)"
+>
+  <page-router-outlet name="primary" splitRole="primary"></page-router-outlet>
+  <page-router-outlet name="secondary" splitRole="secondary"></page-router-outlet>
+  <page-router-outlet name="supplementary" splitRole="supplementary"></page-router-outlet>
+  <page-router-outlet name="inspector" splitRole="inspector"></page-router-outlet>
+</SplitView>

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts

@@ -0,0 +1,52 @@
+import { Component, inject, NO_ERRORS_SCHEMA, OnInit, AfterViewInit } from '@angular/core';
+import {
+  NativeScriptCommonModule,
+  NativeScriptRouterModule,
+  PageRouterOutlet,
+  RouterExtensions,
+} from '@nativescript/angular';
+import { SplitViewState } from './split-view.state';
+
+@Component({
+  selector: 'ns-split-view-demo',
+  templateUrl: './split-view-demo.component.html',
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewDemoComponent implements OnInit, AfterViewInit {
+  router = inject(RouterExtensions);
+  splitViewState = inject(SplitViewState);
+
+  ngOnInit() {
+    console.log('[SplitViewDemo] ngOnInit');
+  }
+
+  ngAfterViewInit() {
+    console.log('[SplitViewDemo] ngAfterViewInit - view is initialized, navigating to outlets');
+    // Use setTimeout to ensure the view is fully rendered and outlets are registered
+    setTimeout(() => {
+      console.log('[SplitViewDemo] Navigating to outlets...');
+      this.router
+        .navigate(
+          [
+            '/',
+            {
+              outlets: {
+                primary: ['primary'],
+                secondary: ['secondary'],
+                supplementary: ['supplementary'],
+                inspector: ['inspector'],
+              },
+            },
+          ],
+          { animated: false },
+        )
+        .then((success) => {
+          console.log(`[SplitViewDemo] navigation result: ${success}`);
+        })
+        .catch((err) => {
+          console.error(`[SplitViewDemo] navigation error: ${err}`);
+        });
+    }, 0);
+  }
+}

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts

@@ -0,0 +1,44 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-inspector',
+  template: `
+    <ActionBar title="Inspector" flat="true"></ActionBar>
+    <GridLayout rows="*" class="h-full bg-slate-50 dark:bg-slate-950">
+      <ScrollView>
+        <StackLayout class="p-5">
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="Pinned" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="true"></Switch>
+            </GridLayout>
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="Show badges" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="false"></Switch>
+            </GridLayout>
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3">
+              <Label col="0" text="Compact" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="true"></Switch>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+          >
+            <Label text="Opacity" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label
+              text="Use the inspector for controls and metadata."
+              class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+            <Slider class="mt-3" minValue="0" maxValue="100" value="85"></Slider>
+          </StackLayout>
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewInspectorComponent {}

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts

@@ -0,0 +1,57 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-primary',
+  template: `
+    <ActionBar title="Primary" flat="true"></ActionBar>
+    <GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
+      <StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
+        <Label text="Split View" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+        <Label text="Primary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+      </StackLayout>
+
+      <ScrollView row="1">
+        <StackLayout class="p-5">
+          <GridLayout columns="*,auto" class="mb-4">
+            <Label col="0" text="Navigation" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label col="1" text="4 items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
+          </GridLayout>
+
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Overview" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Accounts" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Reports" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Settings" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4"
+          >
+            <Label text="Tip" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
+            <Label
+              text="On iPad, keep Primary lightweight. Use Secondary for details and Inspector for properties."
+              class="mt-1 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+          </StackLayout>
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewPrimaryComponent {}

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts

@@ -0,0 +1,98 @@
+import { Component, inject, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+import { SplitViewState } from './split-view.state';
+
+@Component({
+  selector: 'ns-split-view-secondary',
+  template: `
+    <GridLayout rows="*" class="h-full bg-white dark:bg-slate-950">
+      <ScrollView>
+        <StackLayout class="p-5">
+          <GridLayout columns="*,*" class="mb-4" columnGap="12">
+            <StackLayout
+              col="0"
+              class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 mr-1"
+            >
+              <Label text="Active" class="text-xs font-semibold  text-slate-500 dark:text-slate-400"></Label>
+              <Label text="12" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+              <Label text="items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
+            </StackLayout>
+            <StackLayout
+              col="1"
+              class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 ml-1"
+            >
+              <Label text="Updated" class="text-xs font-semibold  text-slate-500 dark:text-slate-400"></Label>
+              <Label text="2m" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+              <Label text="ago" class="text-xs text-slate-500 dark:text-slate-400"></Label>
+            </StackLayout>
+          </GridLayout>
+
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
+            <Label text="Summary" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label
+              text="This column is ideal for the main content. Put your routed page content here."
+              class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+
+            <GridLayout rows="auto,auto,auto" columns="*,auto" class="mt-4" rowGap="10">
+              <Label row="0" col="0" text="Status" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                row="0"
+                col="1"
+                text="Ready"
+                class="text-sm font-semibold text-slate-900 dark:text-slate-100"
+              ></Label>
+
+              <Label row="1" col="0" text="Owner" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                row="1"
+                col="1"
+                text="Demo"
+                class="text-sm font-semibold text-slate-900 dark:text-slate-100"
+              ></Label>
+
+              <Label row="2" col="0" text="Mode" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                row="2"
+                col="1"
+                text="Two-beside"
+                class="text-sm font-semibold text-slate-900 dark:text-slate-100"
+              ></Label>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+          >
+            <Label text="Next" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
+            <Label
+              text="Add your real detail view here (lists, charts, forms)."
+              class="mt-1 text-sm text-slate-700 dark:text-slate-200"
+              textWrap="true"
+            ></Label>
+          </StackLayout>
+
+          @if (!splitViewState.inspectorVisible()) {
+            <StackLayout
+              class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+              (tap)="splitViewState.setInspectorVisible(true)"
+            >
+              <Label text="Open Inspector" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                text="You can open the Inspector to adjust properties."
+                class="mt-1 text-sm text-slate-700 dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </StackLayout>
+          }
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewSecondaryComponent {
+  splitViewState = inject(SplitViewState);
+}

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts

@@ -0,0 +1,64 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-supplementary',
+  template: `
+    <GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
+      <StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
+        <Label text="Activity" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+        <Label text="Supplementary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+      </StackLayout>
+
+      <ScrollView row="1">
+        <StackLayout class="p-5">
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
+            <Label text="Today" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+
+            <GridLayout columns="auto,*" class="mt-3" columnGap="10">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                col="1"
+                text="Opened the split view demo"
+                class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </GridLayout>
+            <GridLayout columns="auto,*" class="mt-2" columnGap="10">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                col="1"
+                text="Routed pages into named outlets"
+                class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </GridLayout>
+            <GridLayout columns="auto,*" class="mt-2" columnGap="10">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                col="1"
+                text="Verified controller mapping on iOS"
+                class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+          >
+            <Label text="Notes" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label
+              text="Supplementary is great for context: recent items, related data, or quick shortcuts."
+              class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+          </StackLayout>
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewSupplementaryComponent {}

apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts

@@ -0,0 +1,31 @@
+import { Routes } from '@angular/router';
+import { SplitViewPrimaryComponent } from './split-view-primary.component';
+import { SplitViewSecondaryComponent } from './split-view-secondary.component';
+import { SplitViewSupplementaryComponent } from './split-view-supplementary.component';
+import { SplitViewInspectorComponent } from './split-view-inspector.component';
+
+// Since SplitViewDemoComponent is bootstrapped directly, we don't include it in routes.
+// The named outlets are defined in SplitViewDemoComponent's template,
+// and these child routes activate into those outlets.
+export const SPLIT_VIEW_ROUTES: Routes = [
+  {
+    path: 'primary',
+    component: SplitViewPrimaryComponent,
+    outlet: 'primary',
+  },
+  {
+    path: 'secondary',
+    component: SplitViewSecondaryComponent,
+    outlet: 'secondary',
+  },
+  {
+    path: 'supplementary',
+    component: SplitViewSupplementaryComponent,
+    outlet: 'supplementary',
+  },
+  {
+    path: 'inspector',
+    component: SplitViewInspectorComponent,
+    outlet: 'inspector',
+  },
+];