@c8y/tutorial 1023.14.100 → 1023.14.102

package/cumulocity.config.ts

@@ -871,6 +871,13 @@ export default {
         description: 'This is an example for the bottom drawer service.',
         scope: 'self'
       },
+      {
+        name: 'Bottom drawer stacked',
+        module: 'bottomDrawerStackedExampleModuleProviders',
+        path: './src/bottom-drawer-stacked/bottom-drawer-stacked.providers.ts',
+        description: 'This is an example for multiple bottom drawers.',
+        scope: 'self'
+      },
       {
         name: 'Widget Config Hook',
         module: 'widgetConfigHookProviders',

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.14.100",
+  "version": "1023.14.102",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1023.14.100",
-    "@c8y/ngx-components": "1023.14.100",
-    "@c8y/client": "1023.14.100",
-    "@c8y/bootstrap": "1023.14.100",
+    "@c8y/style": "1023.14.102",
+    "@c8y/ngx-components": "1023.14.102",
+    "@c8y/client": "1023.14.102",
+    "@c8y/bootstrap": "1023.14.102",
     "@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.14.100",
-    "@c8y/devkit": "1023.14.100"
+    "@c8y/options": "1023.14.102",
+    "@c8y/devkit": "1023.14.102"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

package/src/bottom-drawer-stacked/bottom-drawer-content-example.component.html

@@ -0,0 +1,39 @@
+<div class="card-header separator">
+  <span
+    class="h4 card-title"
+    id="drawerTitle"
+  >
+    {{ title }}
+  </span>
+</div>
+<div class="inner-scroll flex-grow">
+  <div class="card-block">
+    <p>Bottom drawer content</p>
+    <button
+      class="btn btn-primary"
+      (click)="openTopDrawer()"
+    >
+      Open bottom drawer via service
+    </button>
+  </div>
+</div>
+<div class="card-footer text-center p-24 separator flex-no-shrink">
+  <button
+    class="btn btn-default"
+    [disabled]="isDisabled"
+  >
+    This button is disabled, as the inital state defines it.
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="cancel()"
+  >
+    Cancel
+  </button>
+  <button
+    class="btn btn-primary"
+    (click)="save()"
+  >
+    Save
+  </button>
+</div>

package/src/bottom-drawer-stacked/bottom-drawer-content-example.component.ts

@@ -0,0 +1,78 @@
+import { Component, inject, OnInit, OnDestroy, HostListener } from '@angular/core';
+import { BottomDrawerRef, BottomDrawerService } from '@c8y/ngx-components';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BottomDrawerContentTopExampleComponent } from './bottom-drawer-content-top-example.component';
+
+@Component({
+  selector: 'tut-bottom-drawer-content-example',
+  templateUrl: './bottom-drawer-content-example.component.html',
+  standalone: true,
+  host: {
+    class: 'd-contents'
+  }
+})
+export class BottomDrawerContentExampleComponent implements OnInit, OnDestroy {
+  bottomDrawerRef = inject(BottomDrawerRef);
+  isDisabled = false;
+  title = 'First bottom drawer title';
+  destroy$: Subject<boolean> = new Subject<boolean>();
+
+  result: Promise<string> = new Promise((resolve, reject) => {
+    this._save = resolve;
+    this._cancel = reject;
+  });
+
+  private _save: (value: string) => void;
+  private _cancel: (reason?: any) => void;
+  bottomDrawerService = inject(BottomDrawerService);
+
+  @HostListener('document:keydown.escape', ['$event'])
+  async onEscapePress(event: Event) {
+    if (this.bottomDrawerService.isTop(this.bottomDrawerRef)) {
+      event.preventDefault();
+      await this.bottomDrawerRef.close();
+      console.log(
+        'Escape pressed- first bottom drawer closed, handled by BottomDrawerContentExampleComponent'
+      );
+    }
+  }
+
+  ngOnInit() {
+    this.bottomDrawerRef.onClosed$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this._cancel('Drawer closed');
+    });
+  }
+
+  async openTopDrawer() {
+    const drawer = this.bottomDrawerService.openDrawer(BottomDrawerContentTopExampleComponent, {
+      initialState: {
+        // place here any content you want to pass to the component
+        isDisabled: true
+      },
+      disableClickOutside: true
+      // closeOnEscape is true by default
+    });
+
+    try {
+      const _resultOf = await drawer.instance.result;
+    } catch (ex) {
+      //
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  cancel() {
+    this._cancel('User canceled');
+    this.bottomDrawerRef.close();
+  }
+
+  save() {
+    this._save('Value to pass back.');
+    this.bottomDrawerRef.close();
+  }
+}

package/src/bottom-drawer-stacked/bottom-drawer-content-top-example.component.html

@@ -0,0 +1,33 @@
+<div class="card-header separator">
+  <span
+    class="h4 card-title"
+    id="drawerTitle"
+  >
+    {{ title }}
+  </span>
+</div>
+<div class="inner-scroll flex-grow">
+  <div class="card-block">
+    <p>Bottom drawer content</p>
+  </div>
+</div>
+<div class="card-footer text-center p-24 separator flex-no-shrink">
+  <button
+    class="btn btn-default"
+    [disabled]="isDisabled"
+  >
+    This button is disabled, as the inital state defines it.
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="cancel()"
+  >
+    Cancel
+  </button>
+  <button
+    class="btn btn-primary"
+    (click)="save()"
+  >
+    Save
+  </button>
+</div>

package/src/bottom-drawer-stacked/bottom-drawer-content-top-example.component.ts

@@ -0,0 +1,48 @@
+import { Component, inject, OnInit, OnDestroy } from '@angular/core';
+import { BottomDrawerRef } from '@c8y/ngx-components';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'tut-bottom-drawer-content-top-example',
+  templateUrl: './bottom-drawer-content-top-example.component.html',
+  standalone: true,
+  host: {
+    class: 'd-contents'
+  }
+})
+export class BottomDrawerContentTopExampleComponent implements OnInit, OnDestroy {
+  bottomDrawerRef = inject(BottomDrawerRef);
+  isDisabled = false;
+  title = 'Second bottom drawer title';
+  destroy$: Subject<boolean> = new Subject<boolean>();
+
+  result: Promise<string> = new Promise((resolve, reject) => {
+    this._save = resolve;
+    this._cancel = reject;
+  });
+
+  private _save: (value: string) => void;
+  private _cancel: (reason?: any) => void;
+
+  ngOnInit() {
+    this.bottomDrawerRef.onClosed$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this._cancel('Top drawer closed');
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
+  }
+
+  cancel() {
+    this._cancel('User canceled');
+    this.bottomDrawerRef.close();
+  }
+
+  save() {
+    this._save('Value to pass back.');
+    this.bottomDrawerRef.close();
+  }
+}

package/src/bottom-drawer-stacked/bottom-drawer-stacked-example.component.html

@@ -0,0 +1,7 @@
+<button
+  class="btn btn-primary"
+  (click)="openDrawer()"
+  [disabled]="isOpen"
+>
+  Open bottom drawer via service
+</button>

package/src/bottom-drawer-stacked/bottom-drawer-stacked-example.component.ts

@@ -0,0 +1,35 @@
+import { Component, inject } from '@angular/core';
+import { AlertService, BottomDrawerService, CoreModule } from '@c8y/ngx-components';
+import { BottomDrawerContentExampleComponent } from './bottom-drawer-content-example.component';
+
+@Component({
+  selector: 'tut-bottom-drawer-stacked-example',
+  templateUrl: './bottom-drawer-stacked-example.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class BottomDrawerStackedExampleComponent {
+  bottomDrawerService = inject(BottomDrawerService);
+  alertService = inject(AlertService);
+  isOpen = false;
+
+  async openDrawer() {
+    this.isOpen = true;
+    const drawer = this.bottomDrawerService.openDrawer(BottomDrawerContentExampleComponent, {
+      initialState: {
+        // place here any content you want to pass to the component
+        isDisabled: true
+      },
+      disableClickOutside: true,
+      closeOnEscape: false // BottomDrawerContentExampleComponent will handle Escape key on its own
+    });
+
+    try {
+      const resultOf = await drawer.instance.result;
+      this.alertService.success(resultOf);
+    } catch (ex) {
+      this.alertService.danger('Canceled as of: ' + ex);
+    }
+    this.isOpen = false;
+  }
+}

package/src/bottom-drawer-stacked/bottom-drawer-stacked.providers.ts

@@ -0,0 +1,19 @@
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export const bottomDrawerStackedExampleModuleProviders = [
+  hookRoute({
+    path: 'bottom-drawer-stacked',
+    loadComponent: () =>
+      import('./bottom-drawer-stacked-example.component').then(
+        m => m.BottomDrawerStackedExampleComponent
+      )
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      label: 'Bottom drawer stacked',
+      path: '/bottom-drawer-stacked',
+      icon: 'th-list',
+      priority: 0
+    })
+  )
+];