@c8y/tutorial 1020.40.0 → 1021.0.4

package/cumulocity.config.ts

@@ -729,6 +729,13 @@ export default {
         path: './src/pagination/pagination-example.module.ts',
         description: 'This is an example for pagination.',
         scope: 'self'
+      },
+      {
+        name: 'Typeahead',
+        module: 'TypeaheadExampleModule',
+        path: './src/typeahead/typeahead-example.module.ts',
+        description: 'This is an example for the typeahead component.',
+        scope: 'self'
       }
     ]
   },
@@ -742,7 +749,6 @@ export default {
     },
     // The embedded.css is used by codex for iframe embeddings.
     copy: [{ from: './node_modules/@c8y/style/embedded.css', to: './embedded.css' }],
-    brandingEntry: './src/branding/branding.less',
     federation: [
       '@angular/animations',
       '@angular/cdk',

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1020.40.0",
+  "version": "1021.0.4",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1020.40.0",
-    "@c8y/ngx-components": "1020.40.0",
-    "@c8y/client": "1020.40.0",
-    "@c8y/bootstrap": "1020.40.0",
-    "@angular/cdk": "^17.3.9",
-    "ngx-bootstrap": "12.0.0",
+    "@c8y/style": "1021.0.4",
+    "@c8y/ngx-components": "1021.0.4",
+    "@c8y/client": "1021.0.4",
+    "@c8y/bootstrap": "1021.0.4",
+    "@angular/cdk": "^18.2.10",
+    "ngx-bootstrap": "18.0.0",
     "leaflet": "1.9.4",
-    "rxjs": "^7.4.0"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1020.40.0",
-    "@c8y/devkit": "1020.40.0"
+    "@c8y/options": "1021.0.4",
+    "@c8y/devkit": "1021.0.4"
   },
   "peerDependencies": {
-    "@angular/common": ">=16 <18"
+    "@angular/common": ">=18 <19"
   },
   "author": "Cumulocity GmbH"
 }

package/src/__mocks/global-mocks/inventory.interceptor.ts

@@ -94,6 +94,9 @@ export class InventoryInterceptor implements HttpInterceptor {
       c8y_IsAssetType: () => ({
         managedObjects: [generateAssetType()]
       }),
+      c8yAssetTypesCacheInvalidator: () => ({
+        managedObjects: [generateRandomMo()]
+      }),
       c8y_IsDeviceGroup: () => ({
         managedObjects: [
           ...[...Array(5)].map(() => (Math.random() < 0.5 ? generateSubGroup() : generateAsset()))

package/src/__mocks/mock.module.ts

@@ -10,14 +10,15 @@ import {
 import { InventoryInterceptor } from './global-mocks/inventory.interceptor';
 import { MeasurementsInterceptor } from './global-mocks/measurements.interceptor';
 import { API_MOCK_CONFIG, ApiMockConfig } from './mock.model';
+import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
 import { MockService } from './mock.service';
-import { NamedContextDashboardInterceptor } from './scoped-mocks/named-context-dashboard';
 import { ContextDashboardInterceptor } from './scoped-mocks/context-dashboard';
-import { ServerSideDataGridInterceptor } from './scoped-mocks/server-side-data-grid';
 import { DeviceDataGridInterceptor } from './scoped-mocks/device-data-grid';
-import { ServiceDashboardInterceptor } from './scoped-mocks/service-dashboard';
-import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
 import { ListsInterceptor } from './scoped-mocks/lists';
+import { NamedContextDashboardInterceptor } from './scoped-mocks/named-context-dashboard';
+import { ServerSideDataGridInterceptor } from './scoped-mocks/server-side-data-grid';
+import { ServiceDashboardInterceptor } from './scoped-mocks/service-dashboard';
+import { TypeaheadInterceptor } from './scoped-mocks/typeahead';
 // import { BoilerplateInterceptor } from './scoped-mocks/boilerplate';
 @NgModule({
   imports: [CoreModule, CommonModule],
@@ -63,6 +64,16 @@ import { ListsInterceptor } from './scoped-mocks/lists';
       } as ApiMockConfig,
       multi: true
     },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'typeahaed-interceptor',
+        path: 'typeahead',
+        mockService: TypeaheadInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
     {
       provide: API_MOCK_CONFIG,
       useValue: {

package/src/__mocks/scoped-mocks/typeahead.ts

@@ -0,0 +1,70 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { generateResponse, handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+import { generateDevice } from '../utils/generators/managedObjects';
+import { filterObjects } from '../utils/grid';
+
+export class TypeaheadInterceptor implements HttpInterceptor {
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'inventory/managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  mockPOST(_requestDescriptor: string) {
+    return null;
+  }
+
+  mockPUT(_requestDescriptor: string) {
+    return null;
+  }
+
+  private async mockGET(_requestDescriptor: string) {
+    // extra long timeout, to show the usage of c8yFor
+    await new Promise(r => setTimeout(r, 100));
+
+    const responseGenerators = this.getResponseGenerators();
+
+    for (const urlPart in responseGenerators) {
+      if (_requestDescriptor.includes(urlPart)) {
+        const pageSize = _requestDescriptor.match(/\"pageSize\"\:(\d+)/)
+          ? parseInt(_requestDescriptor.match(/\"pageSize\"\:(\d+)/)[1])
+          : null;
+
+        const generatorResult = responseGenerators[urlPart](pageSize);
+        if (generatorResult) {
+          const filteredData = filterObjects(generatorResult.managedObjects, _requestDescriptor);
+
+          const currentPage = _requestDescriptor.match(/\"currentPage\"\:(\d+)/)
+            ? parseInt(_requestDescriptor.match(/\"currentPage\"\:(\d+)/)[1])
+            : null;
+
+          return generateResponse(
+            () => ({
+              managedObjects: filteredData,
+              ...(!!currentPage && currentPage !== 5 && { next: `currentPage=${currentPage + 1}` })
+            }),
+            {
+              totalPages: 30,
+              ...(!!pageSize && { pageSize }),
+              ...(!!currentPage && { currentPage }),
+              ...(!!currentPage && currentPage !== 5 && { next: `currentPage=${currentPage + 1}` })
+            }
+          );
+        }
+      }
+    }
+    return null;
+  }
+
+  private getResponseGenerators() {
+    return {
+      pageSize: pageSize => ({
+        managedObjects: [...[...Array(pageSize || 10)].map(() => generateDevice())]
+      })
+    };
+  }
+}

package/src/app/app.module.ts

@@ -24,7 +24,6 @@ import { WidgetResolversModule } from '../widget-resolvers';
 import { MockModule } from '../__mocks';
 import { IntroductionModule } from '../provider-configuration';
 import { TranslationsModule } from '../translations';
-import { DashboardTabsModule } from '../dashboard-tabs';
 import { BreadcrumbsNodeModule } from '../breadcrumbs/breadcrumbs.module';
 import { AlarmsModule } from '@c8y/ngx-components/alarms';
 
@@ -61,7 +60,6 @@ import { AlarmsModule } from '@c8y/ngx-components/alarms';
     }),
     RedirectToLastRouteModule,
     MockModule,
-    DashboardTabsModule,
     BreadcrumbsNodeModule,
     AlarmsModule.config({ hybrid: false })
   ],

package/src/dynamic-forms/json-schema-example/json-schema-example.component.ts

@@ -77,18 +77,20 @@ const exampleSchema: object = {
 export class JSONSchemaExampleComponent {
   form = new FormGroup({});
   model = {};
-  fields: FormlyFieldConfig[] = [
-    this.jsonschema.toFieldConfig(exampleSchema, {
-      map(mappedField: FormlyFieldConfig, _mapSource: JSONSchema7) {
-        return mappedField;
-      }
-    })
-  ];
+  fields: FormlyFieldConfig[];
 
   constructor(
     public jsonschema: C8yJSONSchema,
     private readonly changeDetectorRef: ChangeDetectorRef
-  ) {}
+  ) {
+    this.fields = [
+      this.jsonschema.toFieldConfig(exampleSchema, {
+        map(mappedField: FormlyFieldConfig, _mapSource: JSONSchema7) {
+          return mappedField;
+        }
+      })
+    ];
+  }
 
   ngAfterViewChecked(): void {
     this.changeDetectorRef.detectChanges();

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

@@ -66,18 +66,22 @@ export class ServerGridExampleComponent implements GridConfigContextProvider {
     hover: true
   };
 
-  columns: Column[] = this.service.getColumns();
-  pagination: Pagination = this.service.getPagination();
+  columns: Column[];
+  pagination: Pagination;
   infiniteScroll: LoadMoreMode = 'auto';
   serverSideDataCallback: any;
 
   refresh: EventEmitter<any> = new EventEmitter<any>();
 
   selectable = true;
-  actionControls: ActionControl[] = this.service.getActionControls();
-  bulkActionControls: BulkActionControl[] = this.service.getBulkActionControls();
+  actionControls: ActionControl[];
+  bulkActionControls: BulkActionControl[];
 
   constructor(private service: ServerGridExampleService) {
+    this.columns = this.service.getColumns();
+    this.pagination = this.service.getPagination();
+    this.actionControls = this.service.getActionControls();
+    this.bulkActionControls = this.service.getBulkActionControls();
     // we're setting up `serverSideDataCallback` to execute a method from this component with bound `this`
     this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
     // we're setting up `onRefreshClick` to be executed on refresh event

package/src/hooks/tabs/awesome/awesome.component.html

@@ -1,6 +1,6 @@
 <!-- The c8y-title component will display the given string (here: "Awesome Tab") in the header as title -->
 <c8y-title>Awesome tab</c8y-title>
-<div class="card">
+<div class="card m-t-24">
   <div class="card-block">
     <p>This is the second tab we added with the <code>hookTab</code>.</p>
   </div>

package/src/hooks/tabs/inline/inline-one.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-inline1',
+  template: `
+    <c8y-title>Inline 1 Component </c8y-title>
+    <p>Hello from inline tab 1</p>
+  `,
+  standalone: true,
+  imports: [HeaderModule]
+})
+export class InlineOne {}

package/src/hooks/tabs/inline/inline-two.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-inline2',
+  template: `
+    <c8y-title>Inline 2 Component </c8y-title>
+    <p>Hello from inline tab 2</p>
+  `,
+  standalone: true,
+  imports: [HeaderModule]
+})
+export class InlineTwo {}

package/src/hooks/tabs/inline/inline.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { InlineTwo } from './inline-two.component';
+import { InlineOne } from './inline-one.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'inline1',
+    pathMatch: 'full'
+  },
+  {
+    path: 'inline1',
+    component: InlineOne
+  },
+  {
+    path: 'inline2',
+    component: InlineTwo
+  }
+];
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(routes)]
+})
+export class InlineModule {}

package/src/hooks/tabs/outstanding/outstanding.component.html

@@ -1,6 +1,6 @@
 <!-- The c8y-title component will display the given string (here: "Outstanding Tab") in the header as title -->
 <c8y-title>Outstanding tab</c8y-title>
-<div class="card">
+<div class="card m-t-24">
   <div class="card-block">
     <p>
       This is the first tab we added with the
@@ -13,10 +13,21 @@
       toggles the orientation for the whole application:
     </p>
     <button
-      class="btn btn-primary"
+      class="btn btn-primary m-t-16"
       (click)="toggleOrientation()"
     >
       Toggle orientation
     </button>
   </div>
 </div>
+<div class="card">
+  <div class="p-relative">
+    <c8y-tabs-outlet
+      orientation="horizontal"
+      outletName="inline-example"
+    ></c8y-tabs-outlet>
+  </div>
+  <div class="p-16" style="min-height: 100px">
+    <router-outlet></router-outlet>
+  </div>
+</div>

package/src/hooks/tabs/outstanding/outstanding.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { CoreModule, OptionsService, TabsService } from '@c8y/ngx-components';
 
 /**
@@ -12,7 +13,7 @@ import { CoreModule, OptionsService, TabsService } from '@c8y/ngx-components';
   selector: 'outstanding',
   templateUrl: './outstanding.component.html',
   standalone: true,
-  imports: [CoreModule]
+  imports: [CoreModule, RouterModule]
 })
 export class OutstandingComponent {
   constructor(

package/src/hooks/tabs/tab.ts

@@ -7,8 +7,7 @@ export class ExampleTabFactory implements TabFactory {
   // Inject the angular Router
   constructor(public router: Router) {}
 
-  // Implement the get()-method, otherwise the ExampleTabFactory
-  // implements the TabFactory interface incorrectly (!)
+  // Implement the get()-method which is called to receive the tabs on each navigation
   get() {
     const tabs: Tab[] = [];
     /**
@@ -16,13 +15,12 @@ export class ExampleTabFactory implements TabFactory {
      *    - Awesome
      *    - Outstanding
      * but these tabs should only displayed if the URL matches
-     * something like: .../apps/tutorial-application/#/world/
      */
     if (this.router.url.match(/\/tabs/g)) {
       /**
        * mandatory for a Tab is the path (string) and the label (string)
        * A click on the tab will load the given path and therefore angular loads the
-       * specified component (check: ../app.modules.ts)
+       * specified component.
        */
       tabs.push({
         path: 'hooks/tabs/awesome',
@@ -39,6 +37,24 @@ export class ExampleTabFactory implements TabFactory {
       } as Tab);
     }
 
+    // We also define two more tabs for the "inline" tabs which
+    // are rendered into any <c8y-tabs-outlet outletName="inline-example"> component
+    tabs.push({
+      path: 'inline1',
+      priority: 1000,
+      label: 'Inline 1',
+      icon: 'diamond',
+      tabsOutlet: 'inline-example'
+    } as Tab);
+
+    tabs.push({
+      path: 'inline2',
+      priority: 1000,
+      label: 'Inline 2',
+      icon: 'diamond',
+      tabsOutlet: 'inline-example'
+    } as Tab);
+
     return tabs;
   }
 }

package/src/hooks/tabs/tabs.module.ts

@@ -3,20 +3,25 @@ import { NavigatorNode, hookNavigator, hookRoute, hookTab } from '@c8y/ngx-compo
 import { ExampleTabFactory } from './tab';
 
 export const hooks = [
+  // important
   hookTab(ExampleTabFactory),
-  hookRoute({
-    path: 'hooks/tabs',
-    redirectTo: 'hooks/tabs/outstanding'
-  }),
-  hookRoute({
-    path: 'hooks/tabs/outstanding',
-    loadComponent: () =>
-      import('./outstanding/outstanding.component').then(m => m.OutstandingComponent)
-  }),
-  hookRoute({
-    path: 'hooks/tabs/awesome',
-    loadComponent: () => import('./awesome/awesome.component').then(m => m.AwesomeComponent)
-  }),
+  // /important
+  hookRoute([
+    {
+      path: 'hooks/tabs',
+      redirectTo: 'hooks/tabs/outstanding'
+    },
+    {
+      path: 'hooks/tabs/outstanding',
+      loadComponent: () =>
+        import('./outstanding/outstanding.component').then(m => m.OutstandingComponent),
+      loadChildren: () => import('./inline/inline.module').then(m => m.InlineModule)
+    },
+    {
+      path: 'hooks/tabs/awesome',
+      loadComponent: () => import('./awesome/awesome.component').then(m => m.AwesomeComponent)
+    }
+  ]),
   hookNavigator(
     new NavigatorNode({
       priority: 50,

package/src/i18n.ts

@@ -5,6 +5,7 @@
  */
 import '@c8y/ngx-components/locales/de.po';
 import '@c8y/ngx-components/locales/en.po';
+import '@c8y/ngx-components/locales/en_US.po';
 import '@c8y/ngx-components/locales/es.po';
 import '@c8y/ngx-components/locales/fr.po';
 import '@c8y/ngx-components/locales/ja_JP.po';
@@ -12,7 +13,6 @@ import '@c8y/ngx-components/locales/ko.po';
 import '@c8y/ngx-components/locales/nl.po';
 import '@c8y/ngx-components/locales/pl.po';
 import '@c8y/ngx-components/locales/pt_BR.po';
-import '@c8y/ngx-components/locales/ru.po';
 import '@c8y/ngx-components/locales/zh_CN.po';
 import '@c8y/ngx-components/locales/zh_TW.po';
 // import './locales/de.po'; // <- adding additional strings to the german translation.

package/src/main.ts

@@ -1,17 +1,13 @@
 import './i18n';
 import { applyOptions, loadOptions } from '@c8y/bootstrap';
 
-/** Verify that custom webpack config is working */
-declare const HELLO_WORLD: string;
-console.log(`${HELLO_WORLD} from custom webpack config`);
-
-const barHolder: HTMLElement = document.querySelector('body > .init-load');
-export const removeProgress = () => barHolder && barHolder.parentNode.removeChild(barHolder);
+const barHolder: HTMLElement | null = document.querySelector('body > .init-load');
+export const removeProgress = () => barHolder?.parentNode?.removeChild(barHolder);
 
 applicationSetup();
 
 async function applicationSetup() {
-  const options = await applyOptions({
+  await applyOptions({
     ...(await loadOptions())
   });
 
@@ -19,7 +15,6 @@ async function applicationSetup() {
     /* webpackPreload: true */
     './bootstrap'
   );
-  const bootstrapApp = mod.bootstrap || (window as any).bootstrap || (() => null);
-
-  return Promise.resolve(bootstrapApp(options)).then(removeProgress);
+  const bootstrapApp = mod.bootstrap;
+  return bootstrapApp().then(removeProgress);
 }

package/src/selector/alarm-event-selector-example/alarm-event-selector.component.ts

@@ -1,8 +1,11 @@
 import { Component, Input } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { CommonModule, CoreModule } from '@c8y/ngx-components';
-import { AlarmEventSelectorModule, AlarmOrEvent } from '@c8y/ngx-components/alarm-event-selector';
-import { AlarmEventSelectorModalOptions } from '@c8y/ngx-components/alarm-event-selector/alarm-event-selector-modal/alarm-event-selector-modal.model';
+import {
+  AlarmEventSelectorModule,
+  AlarmOrEvent,
+  AlarmEventSelectorModalOptions
+} from '@c8y/ngx-components/alarm-event-selector';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 
 @Component({

package/src/selector/datapoint-selection-example/general-example/datapoint-selection-example.component.ts

@@ -2,9 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { IManagedObject, InventoryService } from '@c8y/client';
 import {
   DatapointSelectorModule,
-  DatapointSelectorService
+  DatapointSelectorService,
+  KPIDetails
 } from '@c8y/ngx-components/datapoint-selector';
-import { KPIDetails } from '@c8y/ngx-components/datapoint-selector/datapoint-selection.model';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@c8y/ngx-components';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';

package/src/typeahead/typeahead-example.component.html

@@ -0,0 +1,45 @@
+<c8y-title>Typeahead</c8y-title>
+
+<div class="row">
+  <div class="col-xs-6">
+    <c8y-typeahead
+      container="body"
+      name="selectedDevice"
+      [placeholder]="'Search for devices...'"
+      (onSearch)="setPipe($event)"
+      [allowFreeEntries]="true"
+      [(ngModel)]="selectedDevice"
+    >
+      <c8y-li
+        class="p-l-8 p-r-8 c8y-list__item--link"
+        *c8yFor="let device of devices; notFound: notFoundTemplate; pipe: filterPipe"
+        (click)="selectedDevice = device"
+        [active]="selectedDevice === device"
+      >
+        <c8y-highlight
+          [text]="device.name"
+          [pattern]="pattern"
+        ></c8y-highlight>
+      </c8y-li>
+      <ng-template #notFoundTemplate>
+        <c8y-li
+          class="bg-level-2 p-8 sticky-bottom"
+          *ngIf="pattern.length > 0"
+        >
+          <span translate>No exact match found.</span>
+          <button
+            class="btn btn-default btn-sm m-l-8"
+            title="Add new device"
+            type="button"
+            translate
+          >
+            Add new device
+          </button>
+        </c8y-li>
+      </ng-template>
+    </c8y-typeahead>
+  </div>
+  <div class="col-xs-6">
+    <pre>{{ selectedDevice | json }}</pre>
+  </div>
+</div>

package/src/typeahead/typeahead-example.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { CoreModule, ForOfFilterPipe } from '@c8y/ngx-components';
+import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
+import { pipe } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'tut-typeahead-example',
+  templateUrl: './typeahead-example.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class TypeaheadExampleComponent {
+  devices: IResultList<IManagedObject>;
+  filterPipe: ForOfFilterPipe = pipe(tap());
+  pattern = '';
+  selectedDevice: IManagedObject;
+
+  constructor(private inventoryService: InventoryService) {}
+
+  ngOnInit(): void {
+    this.loadDevices();
+  }
+
+  async loadDevices() {
+    this.devices = await this.inventoryService.list({
+      pageSize: 10,
+      withTotalPages: true,
+      fragmentType: 'c8y_IsDevice',
+      currentPage: 1
+    });
+  }
+
+  async reload() {
+    await this.loadDevices();
+  }
+
+  setPipe(filterStr: string) {
+    this.pattern = filterStr;
+    this.filterPipe = pipe(
+      map((data: []) => {
+        return data.filter(
+          (mo: IManagedObject) =>
+            mo.name && mo.name.toLowerCase().indexOf(filterStr.toLowerCase()) > -1
+        );
+      })
+    );
+  }
+}

package/src/typeahead/typeahead-example.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'typeahead',
+      loadComponent: () =>
+        import('./typeahead-example.component').then(m => m.TypeaheadExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Typeahead',
+        path: 'typeahead'
+      })
+    )
+  ]
+})
+export class TypeaheadExampleModule {}

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

@@ -1,95 +0,0 @@
-import { Component } from '@angular/core';
-import { CoreModule, Tab, TabsService } from '@c8y/ngx-components';
-import { Observable } from 'rxjs';
-
-@Component({
-  selector: 'component1',
-  template: 'component1',
-  standalone: true
-})
-export class Component1 {
-  ngOnInit() {
-    console.log('Component 1 initialized');
-  }
-}
-@Component({
-  selector: 'component2',
-  template: 'component2',
-  standalone: true
-})
-export class Component2 {
-  ngOnInit() {
-    console.log('Component 2 initialized');
-  }
-}
-@Component({
-  selector: 'component3',
-  template: 'component3',
-  standalone: true
-})
-export class Component3 {
-  ngOnInit() {
-    console.log('Component 3 initialized');
-  }
-}
-
-@Component({
-  selector: 'app-dashboard-tabs',
-  template: `<div>
-    <c8y-title>Dashboard Tabs</c8y-title>
-    <h1>Inline Tabs</h1>
-    <div>
-      <c8y-tabs-outlet
-        [tabs]="tabs$ | async"
-        [outletName]="'dashboardTabs'"
-        [orientation]="'vertical'"
-      >
-      </c8y-tabs-outlet>
-      <c8y-tab
-        [label]="'Tab1'"
-        [tabsOutlet]="'dashboardTabs'"
-        (onSelect)="selectTab('Tab1')"
-        [isActive]="selectedTab === 'Tab1'"
-      >
-      </c8y-tab>
-      <c8y-tab
-        [label]="'Tab2'"
-        [tabsOutlet]="'dashboardTabs'"
-        (onSelect)="selectTab('Tab2')"
-        [isActive]="selectedTab === 'Tab2'"
-      >
-      </c8y-tab>
-      <c8y-tab
-        [label]="'Tab3'"
-        [tabsOutlet]="'dashboardTabs'"
-        (onSelect)="selectTab('Tab3')"
-        [isActive]="selectedTab === 'Tab3'"
-      >
-      </c8y-tab>
-
-      <ng-container [ngSwitch]="selectedTab">
-        <component1 *ngSwitchCase="'Tab1'"></component1>
-        <component2 *ngSwitchCase="'Tab2'"></component2>
-        <component3 *ngSwitchCase="'Tab3'"></component3>
-      </ng-container>
-    </div>
-  </div>`,
-  standalone: true,
-  imports: [CoreModule, Component1, Component2, Component3]
-})
-export class DashboardTabsComponent {
-  tabs$: Observable<Tab[]>;
-  selectedTab: string;
-
-  constructor(private tabsService: TabsService) {}
-
-  ngOnInit() {
-    this.tabs$ = this.tabsService.items$;
-  }
-
-  selectTab(selectedTab: string) {
-    this.selectedTab = selectedTab;
-    console.log(this.selectedTab);
-    this.tabsService.refresh();
-  }
-}

package/src/dashboard-tabs/dashboard-tabs.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
-
-@NgModule({
-  providers: [
-    hookRoute({
-      path: 'dashboard-tabs/dashboardTabs',
-      loadComponent: () => import('./dashboard-tabs.component').then(m => m.DashboardTabsComponent)
-    }),
-    hookNavigator(
-      new NavigatorNode({
-        path: 'dashboard-tabs/dashboardTabs',
-        label: 'Dashboard Tabs',
-        icon: 'rocket',
-        priority: 1000
-      })
-    )
-  ]
-})
-export class DashboardTabsModule {}

package/src/dashboard-tabs/index.ts

@@ -1 +0,0 @@
-export * from './dashboard-tabs.module';