@c8y/tutorial 1023.15.0 → 1023.17.0

package/cumulocity.config.ts

@@ -276,6 +276,27 @@ export default {
         description: 'A sample for breadcrumbs content projection.',
         scope: 'self'
       },
+      {
+        name: 'Resizable example',
+        module: 'SplitViewResizableExampleModule',
+        path: './src/split-view/resizable-example/split-view-resizable-example.module.ts',
+        description: 'A sample for split view with resizable layout.',
+        scope: 'self'
+      },
+      {
+        name: 'Fixed example',
+        module: 'SplitViewFixedExampleModule',
+        path: './src/split-view/fixed-example/split-view-fixed-example.module.ts',
+        description: 'A sample for split view with fixed layout.',
+        scope: 'self'
+      },
+      {
+        name: 'Split view full width',
+        module: 'SplitViewFullWidthExampleModule',
+        path: './src/split-view/full-width-example/split-view-full-width-example.module.ts',
+        description: 'A sample for split view in full width mode.',
+        scope: 'self'
+      },
       {
         name: 'Component',
         module: 'ComponentModule',

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.15.0",
+  "version": "1023.17.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1023.15.0",
-    "@c8y/ngx-components": "1023.15.0",
-    "@c8y/client": "1023.15.0",
-    "@c8y/bootstrap": "1023.15.0",
+    "@c8y/style": "1023.17.0",
+    "@c8y/ngx-components": "1023.17.0",
+    "@c8y/client": "1023.17.0",
+    "@c8y/bootstrap": "1023.17.0",
     "@angular/cdk": "^20.2.14",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
@@ -14,8 +14,8 @@
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.15.0",
-    "@c8y/devkit": "1023.15.0"
+    "@c8y/options": "1023.17.0",
+    "@c8y/devkit": "1023.17.0"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

package/src/app/app.config.ts

@@ -16,6 +16,8 @@ import { provideMapExampleNavigator } from '../maps';
 import { provideTranslationsNavigator } from '../translations';
 import { provideLazyWidget } from '../lazy-widget';
 import { provideBreadcrumbsNavigator } from '../breadcrumbs';
+import { provideSplitViewSamples } from '../split-view';
+import { provideIconPanelExample } from '../icon-panel';
 import { provideClientInterceptorSample } from '../client-interceptor';
 import { provideUserMenuSample } from '../user-menu';
 import { AlarmsModule } from '@c8y/ngx-components/alarms';
@@ -53,6 +55,8 @@ export const appConfig: ApplicationConfig = {
     ...provideRedirectToLastRoute(),
     ...provideAPIMock(),
     ...provideBreadcrumbsNavigator(),
+    ...provideSplitViewSamples(),
+    ...provideIconPanelExample(),
     importProvidersFrom(AlarmsModule.config({ hybrid: false }))
   ]
 };

package/src/icon-panel/icon-panel-example.component.html

@@ -0,0 +1,20 @@
+<c8y-title>Icon panel examples</c8y-title>
+<div class="p-16">
+  <p class="m-b-16 text-bold">Basic usage</p>
+  <c8y-icon-panel [sections]="alarmSections"></c8y-icon-panel>
+
+  <p class="m-t-24 m-b-16 text-bold">Display device details with icons and structured layout.</p>
+  <c8y-icon-panel [sections]="deviceSections"></c8y-icon-panel>
+
+  <p class="m-t-24 m-b-16 text-bold">
+    Combine structured sections with additional custom HTML content.
+  </p>
+  <c8y-icon-panel [sections]="deviceSections.slice(0, 2)">
+    <div class="col-xs-12 m-t-8">
+      <div class="alert alert-info m-b-0">
+        <strong>Tip:</strong>
+        You can project additional custom content alongside the icon panels.
+      </div>
+    </div>
+  </c8y-icon-panel>
+</div>

package/src/icon-panel/icon-panel-example.component.ts

@@ -0,0 +1,108 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconPanelComponent, IconPanelSection, TitleComponent } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-icon-panel-example',
+  templateUrl: './icon-panel-example.component.html',
+  standalone: true,
+  imports: [CommonModule, IconPanelComponent, TitleComponent]
+})
+export class IconPanelExampleComponent {
+  deviceSections: IconPanelSection[] = [
+    {
+      id: 'device-info',
+      label: 'Device Information',
+      icon: 'c8y-device',
+      visible: true,
+      content: `
+        <div>
+          <p class="m-b-4"><strong>Model:</strong> Smart Thermostat Pro</p>
+          <p class="m-b-4"><strong>Serial:</strong> THM-001-2024</p>
+          <p class="m-b-0"><strong>Firmware:</strong> v2.4.1</p>
+        </div>
+      `,
+      colClass: 'col-xs-12 col-md-6'
+    },
+    {
+      id: 'location',
+      label: 'Location',
+      icon: 'map-marker',
+      visible: true,
+      content: `
+        <div>
+          <p class="m-b-4">Building A - Floor 1</p>
+          <p class="m-b-0"><small class="text-muted">Room 101</small></p>
+        </div>
+      `,
+      colClass: 'col-xs-12 col-md-6'
+    },
+    {
+      id: 'connection',
+      label: 'Connection Status',
+      icon: 'contactless-payment',
+      visible: true,
+      content:
+        '<p class="m-b-0"><strong class="text-success">Online</strong> - Last seen 2 minutes ago</p>',
+      colClass: 'col-xs-12 col-md-4',
+      iconClass: 'text-success'
+    },
+    {
+      id: 'battery',
+      label: 'Battery Level',
+      icon: 'battery-full',
+      visible: true,
+      content: '<p class="m-b-0"><strong class="text-success">98%</strong> - Charging</p>',
+      colClass: 'col-xs-12 col-md-4',
+      iconClass: 'text-success'
+    },
+    {
+      id: 'signal',
+      label: 'Signal Strength',
+      icon: 'signal',
+      visible: true,
+      content: '<p class="m-b-0"><strong class="text-warning">Medium</strong> - 3/5 bars</p>',
+      colClass: 'col-xs-12 col-md-4',
+      iconClass: 'text-warning'
+    }
+  ];
+
+  alarmSections: IconPanelSection[] = [
+    {
+      id: 'critical',
+      label: 'Critical Alarms',
+      icon: 'exclamation-circle',
+      visible: true,
+      content: '<span class="badge badge-danger">2</span> active',
+      colClass: 'col-xs-12 col-sm-6 col-md-3',
+      iconClass: 'status critical stroked-icon'
+    },
+    {
+      id: 'major',
+      label: 'Major Alarms',
+      icon: 'warning',
+      visible: true,
+      content: '<span class="badge badge-warning">5</span> active',
+      colClass: 'col-xs-12 col-sm-6 col-md-3',
+      iconClass: 'status major stroked-icon'
+    },
+    {
+      id: 'minor',
+      label: 'Minor Alarms',
+      icon: 'high-priority',
+      visible: true,
+      content: '<span class="badge badge-info">12</span> active',
+      colClass: 'col-xs-12 col-sm-6 col-md-3',
+      iconClass: 'status minor stroked-icon'
+    },
+    {
+      id: 'cleared',
+      label: 'Cleared today',
+      icon: 'ok',
+      visible: true,
+      content: '<span class="badge badge-success">28</span> cleared',
+      colClass: 'col-xs-12 col-sm-6 col-md-3',
+      iconClass: 'text-success'
+    }
+  ];
+}

package/src/icon-panel/icon-panel-example.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { IconPanelExampleComponent } from './icon-panel-example.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: IconPanelExampleComponent
+  }
+];
+
+@NgModule({
+  imports: [IconPanelExampleComponent, RouterModule.forChild(routes)],
+  exports: [IconPanelExampleComponent]
+})
+export class IconPanelExampleModule {}

package/src/icon-panel/index.ts

@@ -0,0 +1,19 @@
+import { EnvironmentProviders, Provider } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export function provideIconPanelExample(): (Provider | EnvironmentProviders)[] {
+  return [
+    hookRoute({
+      path: 'icon-panel',
+      loadChildren: () => import('./icon-panel-example.module').then(m => m.IconPanelExampleModule)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/icon-panel',
+        label: 'Icon panel',
+        icon: 'rectangular',
+        priority: 250
+      })
+    )
+  ];
+}

package/src/resizable-grid-example/resizable-grid-example.component.ts

@@ -6,7 +6,11 @@ import { ResizableGridComponent, CoreModule } from '@c8y/ngx-components';
   template: `<c8y-title>Resizable Grid</c8y-title>
     <div class="p-t-24">
       <div class="card">
-        <c8y-resizable-grid style="height: 350px;">
+        <c8y-resizable-grid
+          style="height: 350px;"
+          [collapsible]="collapsible"
+          [collapseThreshold]="320"
+        >
           <div left-pane>
             <div class="card-header">
               <h4>Left Column</h4>
@@ -28,6 +32,11 @@ import { ResizableGridComponent, CoreModule } from '@c8y/ngx-components';
           </div>
         </c8y-resizable-grid>
       </div>
+      <label class="c8y-switch">
+        <input type="checkbox" [(ngModel)]="collapsible" />
+        <span></span>
+        <span class="p-l-8">Enable Collapse Behavior (when width &lt; 320px)</span>
+      </label>
     </div>`,
   standalone: true,
   imports: [ResizableGridComponent, CoreModule]

package/src/split-view/fixed-example/split-view-fixed-example.component.html

@@ -0,0 +1,97 @@
+<div class="p-l-16 p-r-16">
+  <c8y-title>Static example</c8y-title>
+
+  <c8y-sv
+    [isResizable]="false"
+    (selectionChange)="onSelectionChange($event)"
+  >
+    <c8y-sv-list
+      [title]="'Tools & utilities'"
+      [showEmptyState]="false"
+    >
+      <c8y-list-group>
+        @for (item of items; track item) {
+          <c8y-li
+            [selectable]="false"
+            [c8ySvListItem]="item"
+          >
+            <c8y-li-icon>
+              <i
+                class="icon-24"
+                [c8yIcon]="item.icon"
+              ></i>
+            </c8y-li-icon>
+
+            <c8y-li-body>
+              <div class="d-flex a-i-center p-b-4">
+                <p class="m-b-0 text-bold text-16 flex-grow">{{ item.name }}</p>
+                <span
+                  class="badge"
+                  [ngClass]="getStatusClass(item.status)"
+                >
+                  <i
+                    class="icon-12 m-r-4"
+                    [c8yIcon]="getStatusIcon(item.status)"
+                  ></i>
+                  {{ item.status }}
+                </span>
+              </div>
+              <p class="text-muted small m-b-4">{{ item.type }}</p>
+            </c8y-li-body>
+          </c8y-li>
+        }
+      </c8y-list-group>
+      <c8y-sv-footer>
+        <div class="d-flex justify-content-between">
+          <small class="text-muted">{{ items.length }} tools available</small>
+        </div>
+      </c8y-sv-footer>
+    </c8y-sv-list>
+    <c8y-sv-details
+      emptyStateIcon="cog"
+      emptyStateTitle="No tool selected"
+      emptyStateSubtitle="Select a tool from the list to view details"
+      [title]="'Tool details' | translate"
+    >
+      @if (selectedItem) {
+        <ng-container>
+          <div class="d-flex a-i-center m-b-16">
+            <i
+              class="icon-24 m-r-8"
+              [c8yIcon]="selectedItem.icon"
+            ></i>
+            <h4 class="m-b-0 m-r-8 text-bold">{{ selectedItem.name }}</h4>
+            <span
+              class="badge"
+              [ngClass]="getStatusClass(selectedItem.status)"
+            >
+              <i
+                class="icon-12 m-r-4"
+                [c8yIcon]="getStatusIcon(selectedItem.status)"
+              ></i>
+              {{ selectedItem.status }}
+            </span>
+          </div>
+          <p class="m-b-16">{{ selectedItem.description }}</p>
+          <c8y-icon-panel [sections]="itemInfoSections"></c8y-icon-panel>
+        </ng-container>
+      }
+      <c8y-sv-footer>
+        <button
+          class="btn btn-default btn-sm"
+          (click)="editItem()"
+        >
+          <i class="fa fa-edit"></i>
+          Edit
+        </button>
+        <button
+          class="btn btn-danger btn-sm"
+          (click)="deleteItem()"
+        >
+          <i class="fa fa-trash"></i>
+          Delete
+        </button>
+      </c8y-sv-footer>
+    </c8y-sv-details>
+  </c8y-sv>
+</div>

package/src/split-view/fixed-example/split-view-fixed-example.component.ts

@@ -0,0 +1,170 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  CoreModule,
+  IconDirective,
+  IconPanelComponent,
+  IconPanelSection,
+  ListItemBodyComponent,
+  ListItemComponent,
+  ListItemIconComponent,
+  SplitViewComponent,
+  SplitViewDetailsComponent,
+  SplitViewFooterComponent,
+  SplitViewListComponent,
+  SplitViewListItemDirective
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-split-view-fixed-example',
+  templateUrl: './split-view-fixed-example.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    CoreModule,
+    ListItemComponent,
+    ListItemIconComponent,
+    ListItemBodyComponent,
+    IconDirective,
+    SplitViewComponent,
+    SplitViewListComponent,
+    SplitViewDetailsComponent,
+    SplitViewFooterComponent,
+    IconPanelComponent,
+    SplitViewListItemDirective
+  ]
+})
+export class SplitViewFixedExampleComponent {
+  items = [
+    {
+      id: 1,
+      name: 'Configuration Manager',
+      type: 'System Tool',
+      status: 'Ready',
+      description: 'Manage application settings and preferences',
+      icon: 'cog'
+    },
+    {
+      id: 2,
+      name: 'Data Analytics',
+      type: 'Analytics Tool',
+      status: 'Processing',
+      description: 'Analyze and visualize your data',
+      icon: 'c8y-chart'
+    },
+    {
+      id: 3,
+      name: 'User Management',
+      type: 'Admin Tool',
+      status: 'Active',
+      description: 'Manage users, roles and permissions',
+      icon: 'c8y-user'
+    },
+    {
+      id: 4,
+      name: 'Device Monitor',
+      type: 'Monitoring Tool',
+      status: 'Connected',
+      description: 'Monitor device status and health',
+      icon: 'c8y-device'
+    },
+    {
+      id: 5,
+      name: 'Report Generator',
+      type: 'Reporting Tool',
+      status: 'Idle',
+      description: 'Generate custom reports and exports',
+      icon: 'c8y-report'
+    }
+  ];
+
+  selectedItem?: (typeof this.items)[0];
+  itemInfoSections: IconPanelSection[] = [];
+
+  onSelectionChange(item: (typeof this.items)[0] | null) {
+    this.selectedItem = item || undefined;
+    if (this.selectedItem) {
+      this.updateItemInfoSections();
+    }
+  }
+
+  getStatusClass(status: string): string {
+    switch (status) {
+      case 'Ready':
+      case 'Active':
+      case 'Connected':
+        return 'badge-success';
+      case 'Processing':
+        return 'badge-info';
+      case 'Idle':
+        return 'badge-warning';
+      default:
+        return 'badge-system';
+    }
+  }
+
+  getStatusIcon(status: string): string {
+    switch (status) {
+      case 'Ready':
+      case 'Active':
+        return 'ok';
+      case 'Processing':
+        return 'refresh';
+      case 'Connected':
+        return 'connected';
+      case 'Idle':
+        return 'pause';
+      default:
+        return 'info-circle';
+    }
+  }
+
+  editItem() {
+    console.log('Edit item clicked:', this.selectedItem.name);
+    console.log('Item details:', this.selectedItem);
+  }
+
+  deleteItem() {
+    console.log('Delete item clicked:', this.selectedItem.name);
+    console.log('Item ID:', this.selectedItem.id);
+  }
+
+  private updateItemInfoSections() {
+    const item = this.selectedItem;
+    this.itemInfoSections = [
+      {
+        id: 'basic-info',
+        label: 'Basic Information',
+        icon: 'info-circle',
+        iconClass: 'text-info',
+        visible: true,
+        content: `
+          <div class="content-flex-20">
+            <div class="col-6">
+              <div class="d-flex a-i-center gap-4">
+                <strong>Tool Type:</strong>
+                <span>${item.type}</span>
+              </div>
+            </div>
+            <div class="col-6">
+              <div class="d-flex a-i-center gap-4">
+                <strong class="flex-no-shrink">Current Status:</strong>
+                <span class="badge ${this.getStatusClass(item.status)}">
+                  <i class="icon-12 m-r-4 dlt-c8y-icon-${this.getStatusIcon(item.status)}"></i>
+                  ${item.status}
+                </span>
+              </div>
+            </div>
+          </div>
+          <p class="m-t-8">
+            <strong>Description: </strong>
+            <span>${item.description}</span>
+          </p>
+        `,
+        colClass: 'col-xs-12'
+      }
+    ];
+  }
+}

package/src/split-view/fixed-example/split-view-fixed-example.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'split-view-fixed',
+      loadComponent: () =>
+        import('./split-view-fixed-example.component').then(m => m.SplitViewFixedExampleComponent)
+    })
+  ]
+})
+export class SplitViewFixedExampleModule {}

package/src/split-view/full-width-example/split-view-full-width-example.component.html

@@ -0,0 +1,62 @@
+<div class="p-l-16 p-r-16">
+  <c8y-title>Single column example</c8y-title>
+
+  <c8y-sv>
+    <c8y-sv-list
+      [emptyStateIcon]="'c8y-project'"
+      [emptyStateTitle]="'No projects to display'"
+      [title]="'Projects'"
+      [showEmptyState]="items.length === 0"
+    >
+      <c8y-sv-header-actions>
+        <button class="btn btn-primary btn-sm">
+          <i c8yIcon="plus"></i>
+          Add Project
+        </button>
+      </c8y-sv-header-actions>
+
+      @if (items.length > 0) {
+        <c8y-list-group>
+          @for (item of items; track item) {
+            <c8y-li>
+              <c8y-li-body>
+                <div class="d-flex a-i-start">
+                  <div class="flex-grow min-width-0">
+                    <h4 class="m-b-4">{{ item.name }}</h4>
+                    <p class="text-muted m-b-8">{{ item.description }}</p>
+                    <div class="progress">
+                      <div
+                        class="progress-bar"
+                        [style.width.%]="item.progress"
+                        [ngClass]="getProgressClass(item.progress)"
+                      >
+                        {{ item.progress }}%
+                      </div>
+                    </div>
+                  </div>
+                  <div class="text-right m-l-16">
+                    <span
+                      class="badge"
+                      [ngClass]="getStatusClass(item.status)"
+                    >
+                      {{ item.status }}
+                    </span>
+                    <br />
+                    <small class="text-muted m-t-4 d-block">Progress: {{ item.progress }}%</small>
+                  </div>
+                </div>
+              </c8y-li-body>
+            </c8y-li>
+          }
+        </c8y-list-group>
+      }
+
+      <c8y-sv-footer>
+        <div class="d-flex justify-content-between">
+          <small class="text-muted">{{ items.length }} projects total</small>
+          <small class="text-muted">Mode: List only</small>
+        </div>
+      </c8y-sv-footer>
+    </c8y-sv-list>
+  </c8y-sv>
+</div>

package/src/split-view/full-width-example/split-view-full-width-example.component.ts

@@ -0,0 +1,86 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  CoreModule,
+  SplitViewComponent,
+  SplitViewFooterComponent,
+  SplitViewHeaderActionsComponent,
+  SplitViewListComponent
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-split-view-full-width-example',
+  templateUrl: './split-view-full-width-example.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    CoreModule,
+    SplitViewComponent,
+    SplitViewListComponent,
+    SplitViewHeaderActionsComponent,
+    SplitViewFooterComponent
+  ]
+})
+export class SplitViewFullWidthExampleComponent {
+  items = [
+    {
+      id: 1,
+      name: 'Project Alpha',
+      description: 'Web application development project',
+      status: 'In Progress',
+      progress: 75
+    },
+    {
+      id: 2,
+      name: 'Project Beta',
+      description: 'Mobile app development project',
+      status: 'Planning',
+      progress: 25
+    },
+    {
+      id: 3,
+      name: 'Project Gamma',
+      description: 'API integration project',
+      status: 'Completed',
+      progress: 100
+    },
+    {
+      id: 4,
+      name: 'Project Delta',
+      description: 'Database migration project',
+      status: 'In Progress',
+      progress: 55
+    },
+    {
+      id: 5,
+      name: 'Project Epsilon',
+      description: 'Security audit project',
+      status: 'On Hold',
+      progress: 0
+    }
+  ];
+
+  getStatusClass(status: string): string {
+    switch (status) {
+      case 'Completed':
+        return 'badge-success';
+      case 'In Progress':
+        return 'badge-info';
+      case 'Planning':
+        return 'badge-system';
+      case 'On Hold':
+        return 'badge-danger';
+      default:
+        return 'badge-system';
+    }
+  }
+
+  getProgressClass(progress: number): string {
+    if (progress === 100) return 'progress-bar-success';
+    if (progress >= 75) return 'progress-bar-info';
+    if (progress >= 50) return 'progress-bar-warning';
+    return 'progress-bar-danger';
+  }
+}

package/src/split-view/full-width-example/split-view-full-width-example.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'split-view-full-width',
+      loadComponent: () =>
+        import('./split-view-full-width-example.component').then(
+          m => m.SplitViewFullWidthExampleComponent
+        )
+    })
+  ]
+})
+export class SplitViewFullWidthExampleModule {}

package/src/split-view/index.ts

@@ -0,0 +1,42 @@
+import { EnvironmentProviders, Provider } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+const root = new NavigatorNode({
+  label: 'Split view',
+  icon: 'th-list',
+  priority: 200
+});
+
+root.add(
+  new NavigatorNode({
+    path: '/split-view/resizable',
+    label: 'Basic example',
+    icon: 'list'
+  })
+);
+
+root.add(
+  new NavigatorNode({
+    path: '/split-view/fixed',
+    label: 'Static example',
+    icon: 'stop'
+  })
+);
+
+root.add(
+  new NavigatorNode({
+    path: '/split-view/full-width',
+    label: 'Single column example',
+    icon: 'expand'
+  })
+);
+
+export function provideSplitViewSamples(): (Provider | EnvironmentProviders)[] {
+  return [
+    hookRoute({
+      path: 'split-view',
+      loadChildren: () => import('./split-view-lazy.module').then(m => m.SplitViewLazyModule)
+    }),
+    hookNavigator(root)
+  ];
+}

package/src/split-view/resizable-example/split-view-resizable-example.component.html

@@ -0,0 +1,188 @@
+<div class="p-l-16 p-r-16">
+  <c8y-title>Basic example</c8y-title>
+  <c8y-sv
+    [resizableConfig]="{ trackId: 'basic-example-split-view', collapsible: false }"
+    (selectionChange)="onSelectionChange($event)"
+  >
+    <c8y-sv-list
+      [emptyStateIcon]="'c8y-devices'"
+      [title]="'Device list' | translate"
+      [emptyStateTitle]="'No devices to display'"
+      [loading]="loading"
+      [listOpacity]="loading ? 0.6 : 1"
+      [showEmptyState]="items.length === 0 && !loading"
+      [docsUrl]="'/docs/device-management-application/managing-devices/#device-list'"
+    >
+      <c8y-sv-header-actions>
+        <button
+          class="btn btn-default btn-sm"
+          (click)="refresh()"
+          [disabled]="loading"
+        >
+          <i
+            c8yIcon="refresh"
+            [ngClass]="{ 'icon-spin': loading }"
+          ></i>
+          Refresh
+        </button>
+      </c8y-sv-header-actions>
+
+      <!-- Actual content items -->
+      @if (!loading && items.length > 0) {
+        <c8y-list-group>
+          @for (item of items; track item) {
+            <c8y-li
+              [c8ySvListItem]="item"
+              [selectable]="false"
+            >
+              <c8y-li-icon class="a-s-start">
+                <div class="device-icons">
+                  <i
+                    class="icon-24 text-gray-dark stroked-icon"
+                    c8yIcon="c8y-device"
+                  ></i>
+                </div>
+                <c8y-device-status
+                  [mo]="item.managedObject"
+                  [size]="20"
+                ></c8y-device-status>
+              </c8y-li-icon>
+              <c8y-li-body class="a-s-stretch">
+                <div class="d-flex a-i-start fit-h">
+                  <div class="min-width-0 flex-grow">
+                    <p class="text-truncate-wrap p-b-4">
+                      {{ item.name }}
+                    </p>
+                    <div class="d-flex">
+                      <p
+                        class="small text-muted text-truncate flex-grow"
+                        [title]="item.location"
+                      >
+                        <i c8yIcon="map-marker"></i>
+                        {{ item.location }}
+                      </p>
+                      <span
+                        class="badge m-l-8"
+                        [class.badge-success]="item.status === 'Active'"
+                        [class.badge-info]="item.status === 'Inactive'"
+                        [class.badge-danger]="item.status === 'Maintenance'"
+                      >
+                        {{ item.status }}
+                      </span>
+                    </div>
+                    <p class="small text-muted m-t-4">
+                      <i c8yIcon="tag"></i>
+                      {{ item.type }} • {{ item.deviceId }}
+                    </p>
+                  </div>
+                </div>
+              </c8y-li-body>
+            </c8y-li>
+          }
+        </c8y-list-group>
+      }
+
+      <c8y-sv-footer>
+        <small class="text-muted">Total devices: {{ items.length }}</small>
+      </c8y-sv-footer>
+    </c8y-sv-list>
+
+    <c8y-sv-details
+      emptyStateIcon="c8y-device"
+      emptyStateTitle="No device selected"
+      [title]="'Device details' | translate"
+      emptyStateSubtitle="Select a device from the list to view details"
+    >
+      @if (selectedItem) {
+        <c8y-sv-extra-header>
+          <div class="d-flex a-i-center gap-4">
+            <label class="m-b-0">Device ID</label>
+            <p>{{ selectedItem.deviceId }}</p>
+          </div>
+        </c8y-sv-extra-header>
+      }
+
+      @if (selectedItem) {
+        <ng-container>
+          <div class="row">
+            <div class="col-md-4 m-b-16">
+              <label class="text-muted small">Type</label>
+              <p>{{ selectedItem.type }}</p>
+            </div>
+            <div class="col-md-4 m-b-16">
+              <label class="text-muted small">Location</label>
+              <p>{{ selectedItem.location }}</p>
+            </div>
+            <div class="col-md-4 m-b-16">
+              <label class="text-muted small">Last Seen</label>
+              <p>{{ selectedItem.lastSeen }}</p>
+            </div>
+          </div>
+
+          <p class="m-t-16 text-bold">Connection Status</p>
+          <div class="row d-flex-md m-b-24">
+            <div class="col-md-4 col-xs-12">
+              <label class="text-muted small">Send Status</label>
+              <p
+                [ngClass]="getStatusColorClass(selectedItem.managedObject.c8y_Availability?.status)"
+              >
+                {{ selectedItem.managedObject.c8y_Availability?.status || 'UNKNOWN' }}
+              </p>
+            </div>
+            <div class="col-sm-4 col-xs-12">
+              <label class="text-muted small">Push Status</label>
+              <p [ngClass]="getStatusColorClass(selectedItem.managedObject.c8y_Connection?.status)">
+                {{ selectedItem.managedObject.c8y_Connection?.status || 'UNKNOWN' }}
+              </p>
+            </div>
+            <div class="col-md-4 col-xs-12">
+              <label class="text-muted small">Response Interval</label>
+              <p>
+                {{ selectedItem.managedObject.c8y_RequiredAvailability?.responseInterval || 0 }}s
+              </p>
+            </div>
+          </div>
+
+          <c8y-sv-details-actions class="m-t-16">
+            <button
+              class="btn btn-default btn-sm"
+              (click)="editDevice()"
+            >
+              <i c8yIcon="pencil"></i>
+              Edit
+            </button>
+            <button
+              class="btn btn-primary btn-sm"
+              (click)="restartDevice()"
+            >
+              <i c8yIcon="refresh"></i>
+              Restart
+            </button>
+          </c8y-sv-details-actions>
+        </ng-container>
+      }
+      <c8y-sv-footer>
+        <button
+          class="btn btn-default btn-sm"
+          (click)="clearSelection()"
+        >
+          Cancel
+        </button>
+        <button
+          class="btn btn-danger btn-sm"
+          (click)="deleteDevice()"
+        >
+          <i class="fa fa-trash"></i>
+          Delete
+        </button>
+        <button
+          class="btn btn-default btn-sm"
+          (click)="editDevice()"
+        >
+          <i class="fa fa-edit"></i>
+          Edit
+        </button>
+      </c8y-sv-footer>
+    </c8y-sv-details>
+  </c8y-sv>
+</div>

package/src/split-view/resizable-example/split-view-resizable-example.component.ts

@@ -0,0 +1,214 @@
+import { CommonModule } from '@angular/common';
+import { Component, ViewChild } from '@angular/core';
+import {
+  CoreModule,
+  DeviceStatusComponent,
+  EmptyStateComponent,
+  IconDirective,
+  ListItemBodyComponent,
+  ListItemComponent,
+  ListItemIconComponent,
+  SplitViewComponent,
+  SplitViewDetailsActionsComponent,
+  SplitViewDetailsComponent,
+  SplitViewExtraHeaderComponent,
+  SplitViewFooterComponent,
+  SplitViewHeaderActionsComponent,
+  SplitViewListComponent,
+  SplitViewListItemDirective
+} from '@c8y/ngx-components';
+
+type DeviceItem = {
+  id: number;
+  name: string;
+  status: string;
+  location: string;
+  deviceId: string;
+  lastSeen: string;
+  type: string;
+  time: string;
+  firstOccurrenceTime: string;
+  managedObject: {
+    id: string;
+    c8y_Availability: { status: string };
+    c8y_Connection: { status: string };
+    c8y_RequiredAvailability: { responseInterval: number };
+  };
+};
+
+@Component({
+  selector: 'c8y-split-view-resizable-example',
+  templateUrl: './split-view-resizable-example.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CoreModule,
+    DeviceStatusComponent,
+    ListItemComponent,
+    ListItemIconComponent,
+    ListItemBodyComponent,
+    IconDirective,
+    EmptyStateComponent,
+    SplitViewComponent,
+    SplitViewListComponent,
+    SplitViewDetailsComponent,
+    SplitViewHeaderActionsComponent,
+    SplitViewFooterComponent,
+    SplitViewExtraHeaderComponent,
+    SplitViewDetailsActionsComponent,
+    SplitViewListItemDirective
+  ]
+})
+export class SplitViewResizableExampleComponent {
+  @ViewChild(SplitViewDetailsComponent) detailsComponent?: SplitViewDetailsComponent;
+
+  loading = false;
+  selectedItem?: DeviceItem;
+
+  items: DeviceItem[] = [
+    {
+      id: 1,
+      name: 'Smart Thermostat Alpha',
+      status: 'Active',
+      location: 'Building A - Floor 1',
+      deviceId: 'THM-001',
+      lastSeen: '2 minutes ago',
+      type: 'Temperature Sensor',
+      time: new Date(Date.now() - 2 * 60 * 1000).toISOString(),
+      firstOccurrenceTime: new Date(Date.now() - 2 * 60 * 1000).toISOString(),
+      managedObject: {
+        id: 'THM-001',
+        c8y_Availability: { status: 'AVAILABLE' },
+        c8y_Connection: { status: 'CONNECTED' },
+        c8y_RequiredAvailability: { responseInterval: 60 }
+      }
+    },
+    {
+      id: 2,
+      name: 'Security Camera Beta',
+      status: 'Inactive',
+      location: 'Building B - Lobby',
+      deviceId: 'CAM-002',
+      lastSeen: '1 hour ago',
+      type: 'Security Camera',
+      time: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
+      firstOccurrenceTime: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
+      managedObject: {
+        id: 'CAM-002',
+        c8y_Availability: { status: 'UNAVAILABLE' },
+        c8y_Connection: { status: 'DISCONNECTED' },
+        c8y_RequiredAvailability: { responseInterval: 60 }
+      }
+    },
+    {
+      id: 3,
+      name: 'Air Quality Monitor Gamma',
+      status: 'Active',
+      location: 'Building C - Office',
+      deviceId: 'AQM-003',
+      lastSeen: '30 seconds ago',
+      type: 'Environmental Sensor',
+      time: new Date(Date.now() - 30 * 1000).toISOString(),
+      firstOccurrenceTime: new Date(Date.now() - 30 * 1000).toISOString(),
+      managedObject: {
+        id: 'AQM-003',
+        c8y_Availability: { status: 'AVAILABLE' },
+        c8y_Connection: { status: 'CONNECTED' },
+        c8y_RequiredAvailability: { responseInterval: 30 }
+      }
+    },
+    {
+      id: 4,
+      name: 'Smart Lock Delta',
+      status: 'Maintenance',
+      location: 'Building A - Entrance',
+      deviceId: 'LOCK-004',
+      lastSeen: '5 minutes ago',
+      type: 'Access Control',
+      time: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+      firstOccurrenceTime: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+      managedObject: {
+        id: 'LOCK-004',
+        c8y_Availability: { status: 'MAINTENANCE' },
+        c8y_Connection: { status: 'MAINTENANCE' },
+        c8y_RequiredAvailability: { responseInterval: 120 }
+      }
+    },
+    {
+      id: 5,
+      name: 'Energy Meter Epsilon',
+      status: 'Active',
+      location: 'Building D - Utility Room',
+      deviceId: 'EMT-005',
+      lastSeen: '1 minute ago',
+      type: 'Energy Monitor',
+      time: new Date(Date.now() - 60 * 1000).toISOString(),
+      firstOccurrenceTime: new Date(Date.now() - 60 * 1000).toISOString(),
+      managedObject: {
+        id: 'EMT-005',
+        c8y_Availability: { status: 'AVAILABLE' },
+        c8y_Connection: { status: 'CONNECTED' },
+        c8y_RequiredAvailability: { responseInterval: 300 }
+      }
+    }
+  ];
+
+  onSelectionChange(item: DeviceItem | null): void {
+    this.selectedItem = item || undefined;
+  }
+
+  getCurrentDate(): string {
+    return new Date().toLocaleDateString();
+  }
+
+  refresh(): void {
+    this.loading = true;
+    // Simulate API call
+    setTimeout(() => {
+      this.loading = false;
+    }, 1500);
+  }
+
+  editDevice(): void {
+    if (!this.selectedItem) return;
+    // eslint-disable-next-line no-console
+    console.log('Edit device clicked:', this.selectedItem.name);
+    // eslint-disable-next-line no-console
+    console.log('Device details:', this.selectedItem);
+  }
+
+  restartDevice(): void {
+    if (!this.selectedItem) return;
+    // eslint-disable-next-line no-console
+    console.log('Restart device clicked:', this.selectedItem.name);
+    // eslint-disable-next-line no-console
+    console.log('Restarting device:', this.selectedItem.deviceId);
+  }
+
+  deleteDevice(): void {
+    if (!this.selectedItem) return;
+    // eslint-disable-next-line no-console
+    console.log('Delete device clicked:', this.selectedItem.name);
+    // eslint-disable-next-line no-console
+    console.log('Device ID:', this.selectedItem.deviceId);
+  }
+
+  clearSelection(): void {
+    this.detailsComponent?.clearSelection();
+  }
+
+  getStatusColorClass(status: string): string {
+    switch (status) {
+      case 'AVAILABLE':
+      case 'CONNECTED':
+        return 'text-success';
+      case 'UNAVAILABLE':
+      case 'DISCONNECTED':
+        return 'text-danger';
+      case 'MAINTENANCE':
+        return 'text-muted';
+      default:
+        return 'text-muted';
+    }
+  }
+}

package/src/split-view/resizable-example/split-view-resizable-example.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'split-view-resizable',
+      loadComponent: () =>
+        import('./split-view-resizable-example.component').then(
+          m => m.SplitViewResizableExampleComponent
+        )
+    })
+  ]
+})
+export class SplitViewResizableExampleModule {}

package/src/split-view/split-view-lazy.module.ts

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'resizable',
+    loadComponent: () =>
+      import('./resizable-example/split-view-resizable-example.component').then(
+        m => m.SplitViewResizableExampleComponent
+      )
+  },
+  {
+    path: 'fixed',
+    loadComponent: () =>
+      import('./fixed-example/split-view-fixed-example.component').then(
+        m => m.SplitViewFixedExampleComponent
+      )
+  },
+  {
+    path: 'full-width',
+    loadComponent: () =>
+      import('./full-width-example/split-view-full-width-example.component').then(
+        m => m.SplitViewFullWidthExampleComponent
+      )
+  },
+  {
+    path: '',
+    redirectTo: 'resizable',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(routes)]
+})
+export class SplitViewLazyModule {}