@c8y/tutorial 1023.97.7 → 1024.0.0

package/cumulocity.config.ts

@@ -114,6 +114,13 @@ export default {
         description: 'An introduction to custom dashboards.',
         scope: 'self'
       },
+      {
+        name: 'Responsive layout dashboard module',
+        module: 'ResponsiveLayoutDashboardModule',
+        path: './src/dashboard/responsive-layout-dashboard/responsive-layout-dashboard.module.ts',
+        description: 'Demonstrates the viewport-filling responsive layout mode of c8y-dashboard.',
+        scope: 'self'
+      },
       {
         name: 'Dashboard module with example of dynamic component usage',
         module: 'WidgetGuideDashboardModule',
@@ -177,13 +184,6 @@ export default {
         description: 'A sample for component styles using CSS.',
         scope: 'self'
       },
-      {
-        name: 'LESS Component styles Example',
-        module: 'LeanerStyleSheetsExampleModule',
-        path: './src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.module.ts',
-        description: 'A sample for component styles using LESS.',
-        scope: 'self'
-      },
       {
         name: 'SCSS Component styles Example',
         module: 'SyntacticallyAwesomeStyleSheetsExampleModule',

package/package.json

@@ -1,25 +1,27 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.97.7",
+  "version": "1024.0.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@angular/animations": "^20.3.24",
-    "@angular/cdk": "^20.2.14",
-    "@c8y/bootstrap": "1023.97.7",
-    "@c8y/client": "1023.97.7",
-    "@c8y/ngx-components": "1023.97.7",
-    "@c8y/style": "1023.97.7",
+    "@angular/animations": "^21.2.0",
+    "@angular/cdk": "^21.2.0",
+    "@c8y/bootstrap": "1024.0.0",
+    "@c8y/client": "1024.0.0",
+    "@c8y/ngx-components": "1024.0.0",
+    "@c8y/style": "1024.0.0",
+    "gridstack": "^12.4.2",
     "leaflet": "1.9.4",
     "monaco-editor": "~0.53.0",
-    "ngx-bootstrap": "20.0.2",
-    "rxjs": "7.8.2"
+    "ngx-bootstrap": "21.0.1",
+    "rxjs": "7.8.2",
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@c8y/devkit": "1023.97.7",
-    "@c8y/options": "1023.97.7"
+    "@c8y/devkit": "1024.0.0",
+    "@c8y/options": "1024.0.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=20 <21"
+    "@angular/common": ">=21 <22"
   },
   "author": "Cumulocity GmbH",
   "license": "Apache-2.0"

package/src/app/app.config.ts

@@ -1,4 +1,4 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { CoreModule, RouterModule, VersionModule } from '@c8y/ngx-components';
 import { provideHelloSample } from '../hello';
@@ -30,6 +30,7 @@ import { configureWidgetProviders } from '@c8y/ngx-components/widgets/widget-pro
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideZoneChangeDetection(),
     provideAnimations(),
     importProvidersFrom(RouterModule.forRoot()),
     importProvidersFrom(CoreModule.forRoot()),

package/src/dashboard/custom-dashboard/custom-dashboard.component.html

@@ -11,6 +11,17 @@
     {{ 'Add random' }}
   </button>
 </c8y-action-bar-item>
+<c8y-action-bar-item [placement]="'right'">
+  <button
+    class="btn btn-link"
+    title="{{ 'Toggle layout' }}"
+    type="button"
+    (click)="layout = layout === 'grid' ? 'custom' : 'grid'"
+  >
+    <i [c8yIcon]="layout === 'grid' ? 'cogs' : 'th'"></i>
+    {{ layout === 'grid' ? 'Switch to custom layout' : 'Switch to grid layout' }}
+  </button>
+</c8y-action-bar-item>
 <c8y-action-bar-item [placement]="'right'">
   <button
     class="btn btn-link"
@@ -24,33 +35,37 @@
 
 <c8y-help src="/docs/cockpit/working-with-dashboards/#working-with-dashboards"></c8y-help>
 
-<c8y-dashboard (dashboardChange)="dashboardChange($event)">
+<c8y-dashboard
+  [layout]="layout"
+  (dashboardChange)="dashboardChange($event)"
+>
   <!--  Simple widgets represented by widgets array property from CustomDashboardComponent class-->
-  <c8y-dashboard-child
-    [class]="{
-      'panel-title-hidden': true
-    }"
-    title="dynamic"
-    [isFrozen]="isFrozen"
-    *ngFor="let widget of widgets"
-    [data]="widget"
-    [width]="widget.width"
-    [height]="widget.height"
-    #current
-  >
-    <div class="card-block">
-      Simple widget with content only
-      <br />
-      x: {{ current.x }}
-      <br />
-      y: {{ current.y }}
-      <br />
-      width: {{ current.width }}
-      <br />
-      height: {{ current.height }}
-      <br />
-    </div>
-  </c8y-dashboard-child>
+  @for (widget of widgets; track widget) {
+    <c8y-dashboard-child
+      [class]="{
+        'panel-title-hidden': true
+      }"
+      title="dynamic"
+      [isFrozen]="isFrozen"
+      [data]="widget"
+      [width]="widget.width"
+      [height]="widget.height"
+      #current
+    >
+      <div class="card-block">
+        Simple widget with content only
+        <br />
+        x: {{ current.x }}
+        <br />
+        y: {{ current.y }}
+        <br />
+        width: {{ current.width }}
+        <br />
+        height: {{ current.height }}
+        <br />
+      </div>
+    </c8y-dashboard-child>
+  }
 
   <!--  Dashboard child with title and widget classes applied-->
   <c8y-dashboard-child
@@ -129,9 +144,11 @@
     [width]="8"
     [height]="2"
   >
-    <c8y-dashboard-child-title *ngIf="showTitle">
-      <span>Widget title</span>
-    </c8y-dashboard-child-title>
+    @if (showTitle) {
+      <c8y-dashboard-child-title>
+        <span>Widget title</span>
+      </c8y-dashboard-child-title>
+    }
     <c8y-dashboard-child-action>
       <a
         href=""

package/src/dashboard/custom-dashboard/custom-dashboard.component.ts

@@ -20,6 +20,7 @@ export class CustomDashboardComponent implements AfterViewInit, OnDestroy {
   isFrozen = false;
   showTitle = true;
   editComponent = false;
+  layout: 'grid' | 'custom' = 'grid';
 
   @ViewChild('configForm', { static: false })
   configForm: NgForm;

package/src/dashboard/responsive-layout-dashboard/responsive-layout-dashboard.component.html

@@ -0,0 +1,99 @@
+<c8y-title>Responsive layout dashboard</c8y-title>
+
+<c8y-action-bar-item [placement]="'right'">
+  <button
+    class="btn btn-link"
+    title="{{ isFrozen ? 'Enable edit mode' : 'Disable edit mode' }}"
+    type="button"
+    (click)="toggleEdit()"
+  >
+    <i [c8yIcon]="isFrozen ? 'unlock' : 'lock'"></i>
+    {{ isFrozen ? 'Enable edit mode' : 'Disable edit mode' }}
+  </button>
+</c8y-action-bar-item>
+
+<!--
+  layout="custom" — enables the configurable layout mode.
+  alignViewHeight="true" — each row scales so all rows fill the viewport height.
+  [rows]="4" — the grid has 4 rows; each row is 25% of the viewport height.
+  [columns]="12" — 12-column grid; a widget with width=6 spans 50% of the width.
+
+  Enable edit mode above to see the size-preset picker on each widget.
+-->
+<c8y-dashboard
+  class="fit-h"
+  layout="custom"
+  [columns]="columns"
+  [rows]="rows"
+  [alignViewHeight]="true"
+>
+  <!-- Row 1 — full-width banner -->
+  <c8y-dashboard-child
+    [class]="{ 'panel-title-hidden': true }"
+    [isFrozen]="isFrozen"
+    [x]="0"
+    [y]="0"
+    [width]="12"
+    [height]="1"
+  >
+    <div class="card-block d-flex a-i-center j-c-between">
+      <span>Overview — 100% width &times; 25% viewport height</span>
+    </div>
+  </c8y-dashboard-child>
+
+  <!-- Row 2 — two equal columns -->
+  <c8y-dashboard-child
+    [class]="{ 'panel-title-hidden': true }"
+    [isFrozen]="isFrozen"
+    [x]="0"
+    [y]="1"
+    [width]="6"
+    [height]="1"
+  >
+    <div class="card-block d-flex a-i-center j-c-center">50% width &times; 25% height</div>
+  </c8y-dashboard-child>
+
+  <c8y-dashboard-child
+    [class]="{ 'panel-title-hidden': true }"
+    [isFrozen]="isFrozen"
+    [x]="6"
+    [y]="1"
+    [width]="6"
+    [height]="1"
+  >
+    <div class="card-block d-flex a-i-center j-c-center">50% width &times; 25% height</div>
+  </c8y-dashboard-child>
+
+  <!-- Rows 3–4 — a wide chart alongside a narrow sidebar -->
+  <c8y-dashboard-child
+    [class]="{ 'panel-title-border': true }"
+    [isFrozen]="isFrozen"
+    [x]="0"
+    [y]="2"
+    [width]="8"
+    [height]="2"
+  >
+    <c8y-dashboard-child-title>
+      <span>Chart — 67% wide &times; 50% height</span>
+    </c8y-dashboard-child-title>
+    <div class="card-block">
+      Width: 8&nbsp;of&nbsp;12 columns = 67% &nbsp;|&nbsp; Height: 2&nbsp;of&nbsp;4 rows = 50%
+    </div>
+  </c8y-dashboard-child>
+
+  <c8y-dashboard-child
+    [class]="{ 'panel-title-border': true }"
+    [isFrozen]="isFrozen"
+    [x]="8"
+    [y]="2"
+    [width]="4"
+    [height]="2"
+  >
+    <c8y-dashboard-child-title>
+      <span>Sidebar — 33% wide &times; 50% height</span>
+    </c8y-dashboard-child-title>
+    <div class="card-block">
+      Width: 4&nbsp;of&nbsp;12 columns = 33% &nbsp;|&nbsp; Height: 2&nbsp;of&nbsp;4 rows = 50%
+    </div>
+  </c8y-dashboard-child>
+</c8y-dashboard>

package/src/dashboard/responsive-layout-dashboard/responsive-layout-dashboard.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Demonstrates the "custom" layout mode of c8y-dashboard with alignViewHeight enabled.
+ *
+ * With rows=4 and alignViewHeight=true each row automatically scales to exactly
+ * one quarter of the visible viewport height, so the grid always fills the screen
+ * regardless of window size.
+ */
+@Component({
+  selector: 'tut-responsive-layout-dashboard',
+  templateUrl: './responsive-layout-dashboard.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class ResponsiveLayoutDashboardComponent {
+  isFrozen = true;
+  readonly rows = 4;
+  readonly columns = 12;
+
+  toggleEdit() {
+    this.isFrozen = !this.isFrozen;
+  }
+}

package/src/dashboard/responsive-layout-dashboard/responsive-layout-dashboard.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'dashboards/responsive-layout',
+      loadComponent: () =>
+        import('./responsive-layout-dashboard.component').then(
+          m => m.ResponsiveLayoutDashboardComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Responsive layout dashboard',
+        path: '/dashboards/responsive-layout',
+        icon: 'cogs',
+        priority: 2,
+        parent: 'Dashboards'
+      })
+    )
+  ]
+})
+export class ResponsiveLayoutDashboardModule {}

package/src/grids/device-grid-example/device-grid-example-configuration-strategy.ts

@@ -34,11 +34,11 @@ export class DeviceGridExampleConfigurationStrategy extends AbstractConfiguratio
       : null;
   }
 
-  saveConfig$(config: GridConfig, ctx?: GridConfigContext): Observable<GridConfig> {
+  saveConfig$(config: GridConfig, ctx?: GridConfigContext): Observable<void> {
     const context = this.retrieveContext(ctx);
     if (context?.key) {
       localStorage.setItem(context.key, JSON.stringify(config));
     }
-    return of(config);
+    return of(undefined);
   }
 }

package/src/grids/server-grid-example/server-grid-example.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { transform } from 'lodash-es';
 
 import { IManagedObject, InventoryService, QueriesUtil } from '@c8y/client';
 import {
@@ -10,7 +9,7 @@ import {
   Pagination
 } from '@c8y/ngx-components';
 
-import { assign, get, identity } from 'lodash-es';
+import { assign, get, identity, transform } from 'lodash-es';
 import { LastUpdatedDataGridColumn } from './last-updated-data-grid-column/last-updated.data-grid-column';
 import { TypeDataGridColumn } from './type-data-grid-column/type.data-grid-column';
 

package/src/grids/server-grid-example/void-configuration-strategy.ts

@@ -31,7 +31,7 @@ export class VoidConfigurationStrategy extends AbstractConfigurationStrategy {
     return of(null);
   }
 
-  saveConfig$(): Observable<GridConfig> {
-    return of(null);
+  saveConfig$(): Observable<void> {
+    return of(undefined);
   }
 }

package/src/grids/tree-grid-example/server-tree-grid-example.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { transform } from 'lodash-es';
 
 import { IManagedObject, InventoryService, QueriesUtil } from '@c8y/client';
 import {
@@ -10,7 +9,7 @@ import {
   Pagination
 } from '@c8y/ngx-components';
 
-import { assign, get, identity } from 'lodash-es';
+import { assign, get, identity, transform } from 'lodash-es';
 
 /** Model for custom type filtering form. */
 export interface TypeFilteringModel {

package/src/hooks/query-param-bottom-drawer/example-button.component.ts

@@ -1,9 +1,20 @@
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { CoreModule } from '@c8y/ngx-components';
 
 @Component({
   selector: 'app-example-button',
-  template: ` <button (click)="addQueryParam()">Add Query Param</button> `
+  standalone: true,
+  imports: [CoreModule],
+  template: `
+    <c8y-title>Query Param Bottom Drawer</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <p>Click the button to add a query parameter. The bottom drawer will open automatically.</p>
+        <button class="btn btn-primary" (click)="addQueryParam()">Add query param</button>
+      </div>
+    </div>
+  `
 })
 export class ExampleButtonComponent {
   constructor(

package/src/hooks/query-param-bottom-drawer/example-component.ts

@@ -3,12 +3,19 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-example-component',
-  template: `<p>This component was rendered via <code>hookQueryParamBottomDrawer</code></p>
+  template: `
+    <div class="p-24">
+      <h4 class="m-b-16">Query Param Bottom Drawer</h4>
+      <p>This drawer was opened via <code>hookQueryParamBottomDrawer</code>.</p>
+      <p class="text-muted">
+        The URL contains <code>?showExampleComponent=true</code>. Closing this drawer will remove
+        the query parameter.
+      </p>
+    </div>
     <div class="text-center card-footer p-24 separator">
-      <button class="btn btn-default" title="{{ 'Close' }}" type="button" (click)="close()">
-        {{ 'Close' }}
-      </button>
-    </div>`
+      <button class="btn btn-default" type="button" (click)="close()">Close</button>
+    </div>
+  `
 })
 export class ExampleComponent {
   shouldClose: Promise<boolean>;

package/src/hooks/query-param-modal/example-button.component.ts

@@ -1,9 +1,20 @@
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { CoreModule } from '@c8y/ngx-components';
 
 @Component({
   selector: 'app-example-button',
-  template: ` <button (click)="addQueryParam()">Add Query Param</button> `
+  standalone: true,
+  imports: [CoreModule],
+  template: `
+    <c8y-title>Query Param Modal</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <p>Click the button to add a query parameter. The modal will open automatically.</p>
+        <button class="btn btn-primary" (click)="addQueryParam()">Add query param</button>
+      </div>
+    </div>
+  `
 })
 export class ExampleButtonComponent {
   constructor(

package/src/hooks/query-param-modal/example-component.ts

@@ -3,10 +3,21 @@ import { BsModalRef } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'app-example-component',
-  template: `<p>This component was rendered via <code>hookQueryParamModal</code></p>
-    <button class="btn btn-default" title="{{ 'Close' }}" type="button" (click)="cancel()">
-      {{ 'Close' }}
-    </button>`
+  template: `
+    <div class="modal-header">
+      <h4 class="modal-title">Query Param Modal</h4>
+    </div>
+    <div class="modal-body">
+      <p>This modal was opened via <code>hookQueryParamModal</code>.</p>
+      <p class="text-muted">
+        The URL contains <code>?showExampleModalComponent=true</code>. Closing this modal will
+        remove the query parameter.
+      </p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-default" type="button" (click)="cancel()">Close</button>
+    </div>
+  `
 })
 export class ExampleComponent {
   private readonly bsModalRef = inject(BsModalRef);

package/src/input-group/input-group-editable-example.component.ts

@@ -199,6 +199,73 @@ import { Observable, map, timer } from 'rxjs';
           ></c8y-input-group-editable>
         </div>
       </div>
+
+      <hr />
+
+      <!-- MULTILINE -->
+      <h4 class="text-medium m-b-24">Multiline</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">Auto-grow (no max-height)</p>
+          <c8y-input-group-editable
+            [multiline]="true"
+            ariaLabel="Notes"
+            [(ngModel)]="multilineModel"
+          ></c8y-input-group-editable>
+          <p class="text-muted m-t-4">
+            <small>Use <kbd>Ctrl+Enter</kbd> to save, <kbd>Escape</kbd> to cancel.</small>
+          </p>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">With maxHeight="150px"</p>
+          <c8y-input-group-editable
+            [multiline]="true"
+            maxHeight="150px"
+            ariaLabel="Description with max height"
+            [(ngModel)]="multilineMaxHeightModel"
+          ></c8y-input-group-editable>
+          <p class="text-muted m-t-4">
+            <small>Scrolls once content exceeds 150 px.</small>
+          </p>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- FORM-OWNED SAVE (noSaveButton) -->
+      <h4 class="text-medium m-b-24">Form-owned save</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">Single-line ([noSaveButton]="true")</p>
+          <c8y-input-group-editable
+            placeholder="e.g. My app"
+            [noSaveButton]="true"
+            formGroupClass="m-b-0"
+            ariaLabel="Application name"
+            [(ngModel)]="noSaveButtonSingle"
+          ></c8y-input-group-editable>
+          <small class="text-muted">Value: {{ noSaveButtonSingle }}</small>
+          <p class="text-muted m-t-4">
+            <small
+              >Buttons hidden. Value updates on every keystroke. <kbd>Escape</kbd> reverts.</small
+            >
+          </p>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">Multiline ([noSaveButton]="true")</p>
+          <c8y-input-group-editable
+            placeholder="e.g. Describe this item"
+            [multiline]="true"
+            [noSaveButton]="true"
+            formGroupClass="m-b-0"
+            ariaLabel="Description"
+            [(ngModel)]="noSaveButtonMulti"
+          ></c8y-input-group-editable>
+          <p class="text-muted m-t-4">
+            <small>Use <kbd>Escape</kbd> to revert.</small>
+          </p>
+        </div>
+      </div>
     </div>
   `,
   standalone: true,
@@ -238,6 +305,15 @@ export class InputGroupEditableExampleComponent {
   // Disabled state
   disabledModel = 'Read-only value';
 
+  // Multiline
+  multilineModel = 'Edit this multiline value';
+  multilineMaxHeightModel =
+    'Edit this value\nAdd more lines to see scrolling kick in once the height cap is reached';
+
+  // Form-owned save (noSaveButton)
+  noSaveButtonSingle = 'My Application';
+  noSaveButtonMulti = 'Edit me — no Save button.\nEscape to revert.';
+
   // Async validation — simulates a server-side uniqueness check
   readonly asyncFormControl = new FormControl('available', { nonNullable: true });
 

package/tsconfig.app.json

@@ -16,6 +16,7 @@
     "../ngx-components/**/*.ts"
   ],
   "exclude": [
+    "src/**/*.spec.ts",
     "../ngx-components/dist",
     "../ngx-components/**/*.spec.ts",
   ]

package/src/branding/branding.less

@@ -1,78 +0,0 @@
-@import '~@c8y/style/extend.less';
-
-// // to hide the Cumulocity IoT logo on top of navigator
-// // set @extending to true
-@extending: false;
-
-// Replace and uncomment each variable as you need them
-
-/* COLORS */
-// @brand-color: #53cd61; // main color
-// @brand-primary: @brand-color;
-// @brand-complementary: #a8b3b5;
-// @brand-primary-light: lighten(@brand-primary, 20%);
-// // status colors
-// @status-success: #5cb85c;
-// @status-info: @brand-color;
-// @status-warning: #f0ad4e;
-// @status-danger: #d9534f;
-// @danger: #d90000;
-// @warning: #fdc000;
-// @status-warning-dark: #ff8000;
-// @success: #5cb85c;
-// grays
-// @text-color: #444;
-// @gray-30: #3b4748;
-// @gray-40: #49595b;
-// @gray-40: #6d7a7c;
-// // @gray: #8a9596;
-// @gray-80: #cacece;
-// @gray-90: #f8f8f8;
-// @gray-100: #fcfcfc;
-// @text-muted: @gray-50;
-
-// @body-background-color: #f8f8f8; // page background color - always use a light background
-
-/* HEADER */
-// @headerColor: white;
-// @header-text-color: @gray-40;
-// @header-text-color-hover: @brand-primary;
-// @header-color-active: darken(@gray-40, 15%);
-
-/* NAVIGATOR */
-// @navColor: @gray-10;
-// @navColorHeader: @gray-10;
-// @navigator-header-color: white;
-// @navigator-text-color: @gray-100;
-// @navigator-separator-color: fade(white, 5%);
-// @navigator-font-family: @headings-font-family;
-// @navigator-font-size: 13px;
-// @navigator-color-active: white;
-// @navigator-active-bg: @brand-primary;
-// when set adds a vertical gradient in the navigator background
-// @grad-top:                    "";
-// @grad-bottom:                 "";
-
-/* TYPOGRAPHY */
-// @font-family-sans-serif:      "Lato",Arial, Verdana, sans-serif;
-// @font-family-base:            @font-family-sans-serif;
-// @headings-font-family:        "Roboto",Arial, Verdana, sans-serif;
-
-/* BUTTONS */
-// @component-border-radius-base-base:      2px;
-// @component-border-radius-base-large:     @component-border-radius-base-base;
-// @component-border-radius-base-small:     @component-border-radius-base-base;
-// @btn-shadow:                  none;
-
-/* COMPONENTS */
-// @spinner-color:               lighten(@brand-primary, 30%);
-// @link-color:                  #337ab7;
-// @link-color-hover:            darken(@link-color, 15%);
-// @form-control-border-color-focus:           #66afe9;
-
-// @body-background-pattern:     "";
-// @darker-header:               @gray-30;
-// @appswitcher-background:      none;
-// @component-background-hover:              fade(black, 1.5%);
-// @header-app-name:             @header-text-color;
-// @image-path:                  'img/';

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.component.less

@@ -1,16 +0,0 @@
-@background-color: #e6f7ff;
-@border-color: #91d5ff;
-
-.less-example {
-  background-color: @background-color;
-  padding: 15px;
-  border: 1px solid @border-color;
-
-  h5 {
-    color: darken(@border-color, 30%);
-  }
-
-  p {
-    color: darken(@background-color, 50%);
-  }
-}

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.component.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-import { HeaderModule } from '@c8y/ngx-components';
-
-@Component({
-  selector: 'tut-leaner-style-sheets-example',
-  template: `<c8y-title>LESS component styles</c8y-title>
-    <div class="less-example">
-      <h5>LESS Styles</h5>
-      <p>This is styled with LESS</p>
-    </div>`,
-  styleUrls: ['./leaner-style-sheets-example.component.less'],
-  standalone: true,
-  imports: [HeaderModule]
-})
-export class LeanerStyleSheetsExampleComponent {}

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
-
-@NgModule({
-  imports: [CommonModule],
-  providers: [
-    hookRoute({
-      path: 'component-styles/less',
-      loadComponent: () =>
-        import('./leaner-style-sheets-example.component').then(
-          m => m.LeanerStyleSheetsExampleComponent
-        )
-    }),
-    hookNavigator(
-      new NavigatorNode({
-        path: '/component-styles/less',
-        label: 'LESS',
-        icon: 'c8y-css',
-        priority: 79,
-        parent: 'Component styles'
-      })
-    )
-  ]
-})
-export class LeanerStyleSheetsExampleModule {}