@c8y/tutorial 1019.6.11 → 1019.7.15

package/cumulocity.config.ts

@@ -388,12 +388,6 @@ export default {
         path: './src/properties-list/properties-list-example.module.ts',
         description: 'An example of using properties list.'
       },
-      {
-        name: 'Modal example',
-        module: 'ModalExampleModule',
-        path: './src/modal/simple-modal/modal.example.module.ts',
-        description: 'An example for using Modal.'
-      },
       {
         name: 'Confirm modal example',
         module: 'ConfirmModalExampleModule',
@@ -412,6 +406,24 @@ export default {
         path: './src/modal/ngx-modal/ngx-modal-example.module.ts',
         description: 'An example for ngx modal.'
       },
+      {
+        name: 'Example of ngx modal sizes',
+        module: 'NgxModalSizesExampleModule',
+        path: './src/modal/ngx-modal-sizes/ngx-modal-sizes-example.module.ts',
+        description: 'An example for ngx modal of different sizes.'
+      },
+      {
+        name: 'Example of ngx modal selectors',
+        module: 'NgxModalSelectorsExampleModule',
+        path: './src/modal/ngx-modal-selectors/ngx-modal-selectors-example.module.ts',
+        description: 'An example for ngx modal using ng-content selectors.'
+      },
+      {
+        name: 'Example of ngx modal accessibility',
+        module: 'NgxModalAccessibilityExampleModule',
+        path: './src/modal/ngx-modal-accessibility/ngx-modal-accessibility-example.module.ts',
+        description: 'An example for ngx modal accessibility.'
+      },
       {
         name: 'Example of realtime',
         module: 'RealtimeTutorialModule',
@@ -586,6 +598,9 @@ export default {
         'FormsTutorialModule',
         'TextTranslationNgnonbindableModule',
         'NgxModalExampleModule',
+        'NgxModalSizesExampleModule',
+        'NgxModalSelectorsExampleModule',
+        'NgxModalAccessibilityExampleModule',
         'JsonSchemaExampleModule',
         'IntroductionExampleModule',
         'CustomElementExampleModule',
@@ -637,7 +652,6 @@ export default {
         'AssetSelectorMillerExampleModule',
         'AssetSelectorTreeExampleModule',
         'DatapointSelectionExampleModule',
-        'ModalExampleModule',
         'ConfirmModalExampleModule',
         'TutorialVersionModule',
         'PopConfirmExampleModule',

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.6.11",
+  "version": "1019.7.15",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/devkit": "1019.6.11",
-    "@c8y/style": "1019.6.11",
-    "@c8y/ngx-components": "1019.6.11",
-    "@c8y/client": "1019.6.11",
-    "@c8y/bootstrap": "1019.6.11",
+    "@c8y/devkit": "1019.7.15",
+    "@c8y/style": "1019.7.15",
+    "@c8y/ngx-components": "1019.7.15",
+    "@c8y/client": "1019.7.15",
+    "@c8y/bootstrap": "1019.7.15",
     "@angular/cdk": "^16.2.11",
     "ngx-bootstrap": "11.0.2",
     "leaflet": "1.7.1",

package/src/__mocks/utils/common.ts

@@ -12,8 +12,6 @@ import { from } from 'rxjs';
  * @param urlPath - The URL path which will be used to determine if the request should be handled. If the request URL includes this path, a handler will be searched for.
  * @param handlers - An object mapping HTTP methods to their respective handlers. These handlers are functions that accept a string argument (requestDescriptor), which is a combination of the request URL and any parameters or body, and return either a Promise or an object of `IFetchResponse` type.
  *
- * For example:
- *
  * ```typescript
  * {
  *   POST: mockPOSTFunction,
@@ -25,7 +23,7 @@ import { from } from 'rxjs';
  * If a handler is found for the HTTP method of the request, the handler function is called with the `requestDescriptor` as its argument.
  * @returns An Observable which will either contain the response from the matched handler function or, if no handler is matched, the result of the `next.handle(req)` call.
  *
- * @example
+ *
  * In the example below, all requests to inventory/managedObjects will pass through the interceptor.
  *
  * ```typescript
@@ -45,7 +43,6 @@ import { from } from 'rxjs';
  *   mockPUT(_requestDescriptor: string) {
  *    return null;
  *   }
- *   ...
  * }
  * ```
  */

package/src/hooks/action/logout-action/logout-action.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+// eslint-disable-next-line
 import { CoreModule, LoginService } from '@c8y/ngx-components';
 
 @Component({
@@ -10,9 +11,12 @@ import { CoreModule, LoginService } from '@c8y/ngx-components';
   imports: [CoreModule]
 })
 export class LogoutActionComponent {
-  constructor(private loginService: LoginService) {}
+  // Uncomment to see the effect.
+  // constructor(private loginService: LoginService) {}
 
   logout() {
-    this.loginService.logout();
+    console.log('Logout action triggered!');
+    // Uncomment to see the effect.
+    // this.loginService.logout();
   }
 }

package/src/modal/confirm-modal/confirm-modal-example.component.ts

@@ -1,69 +1,58 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import {
-  ConfirmModalComponent,
   CoreModule,
   FormsModule,
-  ModalLabels,
+  gettext,
   ModalModule,
-  Status,
-  StatusType
+  ModalService,
+  Status
 } from '@c8y/ngx-components';
-import { DeleteModalCheckboxes } from '@c8y/ngx-components/sub-assets';
-import { Subject } from 'rxjs';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { DeleteModalExampleComponent } from './delete-modal-example.component';
 
 @Component({
-  selector: 'confirm-modal',
-  template: `<c8y-confirm-modal
-    [title]="'Delete device'"
-    [status]="status"
-    [labels]="labels"
-    #modalRef
-  >
-    <form>
-      <p class="text-wrap m-b-16">
-        {{ 'You are about to delete device. Do you want to proceed?' }}
-      </p>
-      <c8y-form-group class="m-b-0">
-        <label class="c8y-checkbox" title="{{ 'Delete devices' }}">
-          <input name="cascade" type="checkbox" [(ngModel)]="config.cascade" />
-          <span></span>
-          <span class="text-break-word">
-            {{ 'Also delete all devices inside asset and its subassets' }}
-          </span>
-        </label>
-      </c8y-form-group>
-    </form>
-  </c8y-confirm-modal>`,
+  selector: 'tut-confirm-modal',
+  template: `<div class="p-t-24">
+    <c8y-title>Confirm modal example</c8y-title>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default" (click)="deleteConfigurationSnapshot()">
+        Confirm modal using <code>ModalService.confirm</code>
+      </button>
+    </div>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default" (click)="deleteDevice()">
+        Confirm modal using <code>c8y-confirm-modal</code> component
+      </button>
+    </div>
+  </div>`,
   standalone: true,
-  imports: [ModalModule, FormsModule, CoreModule]
+  imports: [ModalModule, FormsModule, CoreModule, DeleteModalExampleComponent]
 })
 export class ConfirmModalExampleComponent {
-  @ViewChild('modalRef', { static: false }) modalRef: ConfirmModalComponent;
-  labels: ModalLabels = { ok: 'Delete', cancel: 'Cancel' };
-  status: StatusType = Status.DANGER;
-  closeSubject: Subject<DeleteModalCheckboxes> = new Subject();
-  config: DeleteModalCheckboxes = {
-    cascade: false
-  };
+  constructor(
+    private bsModalService: BsModalService,
+    private modalService: ModalService
+  ) {}
 
-  async ngAfterViewInit() {
-    try {
-      await this.modalRef.result;
-      this.onClose();
-    } catch (error) {
-      this.onDismiss();
-    }
-  }
-
-  onClose() {
-    console.log('You have clicked "Delete" button the modal!');
-    this.closeSubject.next(this.config);
-    console.log('cascade is true -> you checked the checkbox', this.config);
-    this.closeSubject.complete();
+  deleteDevice() {
+    this.bsModalService.show(DeleteModalExampleComponent);
   }
 
-  onDismiss() {
-    console.log('You have clicked "Cancel" button the modal!');
-    this.closeSubject.complete();
+  async deleteConfigurationSnapshot() {
+    try {
+      await this.modalService.confirm(
+        'Delete configuration snapshot',
+        'You are about to delete the configuration snapshot DeviceA.',
+        Status.DANGER,
+        {
+          ok: gettext('Delete')
+        }
+      );
+      // eslint-disable-next-line no-console
+      console.log('Delete clicked');
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('Cancel clicked');
+    }
   }
 }

package/src/modal/confirm-modal/delete-modal-example.component.ts

@@ -0,0 +1,73 @@
+import { AfterViewInit, Component, EventEmitter, Output, ViewChild } from '@angular/core';
+import {
+  ConfirmModalComponent,
+  CoreModule,
+  FormsModule,
+  ModalLabels,
+  ModalModule,
+  Status,
+  StatusType
+} from '@c8y/ngx-components';
+import { DeleteModalCheckboxes } from '@c8y/ngx-components/sub-assets';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'tut-delete-modal',
+  template: ` <c8y-confirm-modal
+    [title]="'Delete device'"
+    [status]="status"
+    [labels]="labels"
+    #modalRef
+  >
+    <form>
+      <p class="text-wrap m-b-16">
+        {{ 'You are about to delete device. Do you want to proceed?' }}
+      </p>
+      <c8y-form-group class="m-b-0">
+        <label class="c8y-checkbox" title="{{ 'Delete devices' }}">
+          <input name="cascade" type="checkbox" [(ngModel)]="config.cascade" />
+          <span></span>
+          <span class="text-break-word">
+            {{ 'Also delete all devices inside asset and its subassets' }}
+          </span>
+        </label>
+      </c8y-form-group>
+    </form>
+  </c8y-confirm-modal>`,
+  standalone: true,
+  imports: [ModalModule, FormsModule, CoreModule]
+})
+export class DeleteModalExampleComponent implements AfterViewInit {
+  @ViewChild('modalRef', { static: false }) modalRef: ConfirmModalComponent;
+  labels: ModalLabels = { ok: 'Delete', cancel: 'Cancel' };
+  status: StatusType = Status.DANGER;
+  closeSubject: Subject<DeleteModalCheckboxes> = new Subject();
+  config: DeleteModalCheckboxes = {
+    cascade: false
+  };
+
+  @Output() hideModal = new EventEmitter();
+
+  async ngAfterViewInit() {
+    try {
+      await this.modalRef.result;
+      this.onClose();
+    } catch (error) {
+      this.onDismiss();
+    }
+  }
+
+  onClose() {
+    // eslint-disable-next-line no-console
+    console.log('You have clicked the "Delete" button!');
+    // eslint-disable-next-line no-console
+    console.log('Config value:', this.config);
+    this.hideModal.emit();
+  }
+
+  onDismiss() {
+    // eslint-disable-next-line no-console
+    console.log('You have clicked "Cancel" button the modal!');
+    this.hideModal.emit();
+  }
+}

package/src/modal/ngx-modal/ngx-modal-example.component.ts

@@ -1,34 +1,86 @@
 import { Component, TemplateRef } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import {
+  C8yTranslateModule,
+  FormsModule,
+  HeaderModule,
+  ModalLabels,
+  ModalModule,
+  CoreModule
+} from '@c8y/ngx-components';
+import { SimpleModalExampleComponent } from './simple-modal-example.component';
 
 @Component({
-  selector: 'ngx-modal-example',
-  template: `<button class="btn btn-primary" type="button" (click)="openModal(template)">
-      Create template modal
-    </button>
-
+  selector: 'tut-ngx-modal',
+  template: `<div class="p-t-24">
+    <c8y-title>ngx-bootstrap modal example</c8y-title>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default" type="button" (click)="openTemplateModal(template)">
+        Modal with <code>TemplateRef</code>
+      </button>
+    </div>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default" type="button" (click)="openC8yComponentModal()">
+        Modal with <code>c8y-modal</code>
+      </button>
+    </div>
     <ng-template #template>
-      <div class="modal-header">
-        <h4 class="modal-title pull-left">Modal</h4>
-        <button
-          class="btn-close close pull-right"
-          aria-label="Close"
-          type="button"
-          (click)="modalRef?.hide()"
-        >
-          <span class="visually-hidden" aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">This is a modal.</div>
-    </ng-template>`,
+      <c8y-modal
+        title="Export documents"
+        (onClose)="onTemplateRefClose($event)"
+        (onDismiss)="onTemplateRefDismiss($event)"
+        [labels]="labels"
+        [disabled]="true"
+      >
+        <c8y-list-group>
+          <c8y-li *ngFor="let a of listArray; let index = index">
+            <c8y-li-checkbox></c8y-li-checkbox>
+            <c8y-li-icon icon="file"></c8y-li-icon>
+            Document {{ index + 1 }}
+          </c8y-li>
+        </c8y-list-group>
+      </c8y-modal>
+    </ng-template>
+  </div>`,
   standalone: true,
-  imports: []
+  imports: [
+    SimpleModalExampleComponent,
+    HeaderModule,
+    C8yTranslateModule,
+    FormsModule,
+    ModalModule,
+    CoreModule
+  ]
 })
 export class NgxModalExampleComponent {
   modalRef?: BsModalRef;
+  labels: ModalLabels = { ok: 'Export', cancel: 'Cancel' };
+  listArray = new Array(12);
   constructor(private modalService: BsModalService) {}
 
-  openModal(template: TemplateRef<any>) {
-    this.modalRef = this.modalService.show(template);
+  onTemplateRefDismiss(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Cancel" clicked');
+    this.modalRef.hide();
+  }
+
+  onTemplateRefClose(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Export" clicked');
+    this.modalRef.hide();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  openTemplateModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(template, { ignoreBackdropClick: true });
+  }
+
+  openC8yComponentModal(size: 'modal-sm' | 'modal-md' | 'modal-lg' = 'modal-md') {
+    this.modalService.show(SimpleModalExampleComponent, {
+      class: size,
+      ariaDescribedby: 'modal-body',
+      ariaLabelledBy: 'modal-title',
+      ignoreBackdropClick: true
+    }).content as SimpleModalExampleComponent;
   }
 }

package/src/modal/ngx-modal/ngx-modal-example.module.ts

@@ -13,7 +13,7 @@ import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
         label: 'Ngx modal',
         path: '/modal/ngx-modal',
         icon: 'list-alt',
-        priority: 10,
+        priority: 30,
         parent: 'Modal'
       })
     )

package/src/modal/ngx-modal/simple-modal-example.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import {
+  CommonModule,
+  FormsModule,
+  HeaderModule,
+  ModalLabels,
+  ModalModule,
+  CoreModule
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-simple-modal',
+  template: `
+    <c8y-modal
+      title="Export documents"
+      (onClose)="onClose($event)"
+      (onDismiss)="onDismiss($event)"
+      [labels]="labels"
+      [disabled]="true"
+    >
+      <c8y-list-group>
+        <c8y-li *ngFor="let a of listArray; let index = index">
+          <c8y-li-checkbox></c8y-li-checkbox>
+          <c8y-li-icon icon="file"></c8y-li-icon>
+          Document {{ index + 1 }}
+        </c8y-li>
+      </c8y-list-group>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, CoreModule]
+})
+export class SimpleModalExampleComponent {
+  labels: ModalLabels = { ok: 'Export', cancel: 'Cancel' };
+  listArray = new Array(12);
+  onDismiss(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Cancel" clicked');
+  }
+
+  onClose(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Export" clicked');
+  }
+}

package/src/modal/ngx-modal-accessibility/ngx-modal-accessibility-example.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import {
+  C8yTranslateModule,
+  CoreModule,
+  FormsModule,
+  HeaderModule,
+  ModalModule
+} from '@c8y/ngx-components';
+import { SimpleModalAccessibilityExampleComponent } from './simple-modal-accessibility-example.component';
+
+@Component({
+  selector: 'tut-ngx-modal-accessibility',
+  template: `<div>
+    <c8y-title>ngx-bootstrap modal example with custom ids</c8y-title>
+    <div class="p-t-24 p-b-24 text-center">
+      <button
+        class="btn btn-default m-8"
+        type="button"
+        (click)="openComponentModalWithContentSelectors()"
+      >
+        Create component modal with with ModalComponent and custom ids
+      </button>
+    </div>
+  </div>`,
+  standalone: true,
+  imports: [
+    HeaderModule,
+    SimpleModalAccessibilityExampleComponent,
+    C8yTranslateModule,
+    FormsModule,
+    ModalModule,
+    CoreModule
+  ]
+})
+export class NgxModalAccessibilityExampleComponent {
+  constructor(private modalService: BsModalService) {}
+
+  openComponentModalWithContentSelectors() {
+    this.modalService.show(SimpleModalAccessibilityExampleComponent, {
+      class: 'modal-sm',
+      ariaDescribedby: 'modal-body-custom',
+      ariaLabelledBy: 'modal-title-custom',
+      ignoreBackdropClick: true
+    }).content as SimpleModalAccessibilityExampleComponent;
+  }
+}

package/src/modal/ngx-modal-accessibility/ngx-modal-accessibility-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'modal/ngx-modal-accessibility',
+      loadComponent: () =>
+        import('./ngx-modal-accessibility-example.component').then(
+          m => m.NgxModalAccessibilityExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Ngx modal accessibility',
+        path: '/modal/ngx-modal-accessibility',
+        icon: 'list-alt',
+        priority: 10,
+        parent: 'Modal'
+      })
+    )
+  ]
+})
+export class NgxModalAccessibilityExampleModule {}

package/src/modal/ngx-modal-accessibility/simple-modal-accessibility-example.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import {
+  CommonModule,
+  FormsModule,
+  HeaderModule,
+  ListGroupModule,
+  ModalLabels,
+  ModalModule
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-simple-modal-with-selectors',
+  template: `
+    <c8y-modal
+      (onClose)="onClose($event)"
+      (onDismiss)="onDismiss($event)"
+      [labels]="labels"
+      [headerClasses]="'dialog-header'"
+      [disabled]="true"
+    >
+      <ng-container c8y-modal-title>
+        <span [c8yIcon]="'export'"></span>
+        <div class="modal-title" id="modal-title-custom">Export documents</div>
+      </ng-container>
+      <c8y-list-group id="modal-body-custom">
+        <c8y-li *ngFor="let a of listArray; let index = index">
+          <c8y-li-checkbox></c8y-li-checkbox>
+          <c8y-li-icon icon="file"></c8y-li-icon>
+          Document {{ index + 1 }}
+        </c8y-li>
+      </c8y-list-group>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, ListGroupModule]
+})
+export class SimpleModalAccessibilityExampleComponent {
+  labels: ModalLabels = { ok: 'Export', cancel: 'Cancel' };
+  listArray = new Array(12);
+  onDismiss(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Cancel" clicked');
+  }
+
+  onClose(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Export" clicked');
+  }
+}

package/src/modal/ngx-modal-selectors/ngx-modal-selectors-example.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import {
+  C8yTranslateModule,
+  CoreModule,
+  FormsModule,
+  HeaderModule,
+  ModalModule
+} from '@c8y/ngx-components';
+import { SimpleModalExampleWithContentSelectorsComponent } from './simple-modal-example-with-content-selectors.component';
+
+@Component({
+  selector: 'tut-ngx-modal-selectors',
+  template: `<div>
+    <c8y-title>ngx-bootstrap modal example with ng-content selectors</c8y-title>
+    <div class="p-t-24 p-b-24 text-center">
+      <button
+        class="btn btn-default m-8"
+        type="button"
+        (click)="openComponentModalWithContentSelectors()"
+      >
+        Modal with <code>c8y-modal</code> and <code>ng-content</code> selectors
+      </button>
+    </div>
+  </div>`,
+  standalone: true,
+  imports: [
+    HeaderModule,
+    SimpleModalExampleWithContentSelectorsComponent,
+    C8yTranslateModule,
+    FormsModule,
+    ModalModule,
+    CoreModule
+  ]
+})
+export class NgxModalSelectorsExampleComponent {
+  constructor(private modalService: BsModalService) {}
+
+  openComponentModalWithContentSelectors() {
+    this.modalService.show(SimpleModalExampleWithContentSelectorsComponent, {
+      class: 'modal-sm',
+      ariaDescribedby: 'modal-body',
+      ariaLabelledBy: 'modal-title',
+      ignoreBackdropClick: true
+    }).content as SimpleModalExampleWithContentSelectorsComponent;
+  }
+}

package/src/modal/ngx-modal-selectors/ngx-modal-selectors-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'modal/ngx-modal-selectors',
+      loadComponent: () =>
+        import('./ngx-modal-selectors-example.component').then(
+          m => m.NgxModalSelectorsExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Ngx modal selectors',
+        path: '/modal/ngx-modal-selectors',
+        icon: 'list-alt',
+        priority: 10,
+        parent: 'Modal'
+      })
+    )
+  ]
+})
+export class NgxModalSelectorsExampleModule {}

package/src/modal/ngx-modal-selectors/simple-modal-example-with-content-selectors.component.ts

@@ -0,0 +1,72 @@
+import { Component, ViewChild } from '@angular/core';
+import { CommonModule, FormsModule, HeaderModule, ModalModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-simple-modal-with-selectors',
+  template: `
+    <c8y-modal
+      title="Create smart group"
+      [headerClasses]="'dialog-header'"
+      [customFooter]="true"
+      #modal
+    >
+      <ng-container c8y-modal-title>
+        <span [c8yIcon]="'c8y-group-smart'"></span>
+      </ng-container>
+
+      <form class="p-24" #createSmartGroup="ngForm" c8y-modal-body>
+        <c8y-form-group>
+          <label for="name" translate> Smart group name </label>
+          <input
+            class="form-control"
+            id="name"
+            placeholder="{{ 'e.g. My smart group' }}"
+            name="name"
+            type="text"
+            autocomplete="off"
+            required
+            [(ngModel)]="smartGroup.name"
+          />
+        </c8y-form-group>
+      </form>
+
+      <div class="modal-footer" c8y-modal-footer-custom>
+        <button class="btn btn-default" (click)="onCustomFooterCancel()">
+          {{ 'Cancel' }}
+        </button>
+        <button
+          class="btn btn-primary"
+          (click)="onCustomFooterContinue()"
+          [disabled]="createSmartGroup.form.invalid || pending"
+          [ngClass]="{ 'btn-pending': pending }"
+        >
+          {{ 'Continue' }}
+        </button>
+      </div>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule]
+})
+export class SimpleModalExampleWithContentSelectorsComponent {
+  smartGroup = {
+    name: ''
+  };
+  pending = false;
+
+  @ViewChild('modal', { static: false }) private modal;
+
+  onCustomFooterCancel(): void {
+    console.log('On custom footer Cancel');
+    this.modal._dismiss();
+  }
+
+  onCustomFooterContinue(): void {
+    this.pending = true;
+    console.log('On custom footer Continue');
+    setTimeout(() => {
+      this.modal._dismiss();
+      this.pending = false;
+    }, 1000);
+  }
+}

package/src/modal/ngx-modal-sizes/large-modal-example.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import {
+  CommonModule,
+  FormsModule,
+  HeaderModule,
+  ModalLabels,
+  ModalModule,
+  CoreModule
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-simple-modal',
+  template: `
+    <c8y-modal
+      title="Export documents"
+      (onClose)="onClose($event)"
+      (onDismiss)="onDismiss($event)"
+      [labels]="labels"
+      [disabled]="true"
+    >
+      <c8y-list-group>
+        <c8y-li *ngFor="let a of listArray; let index = index">
+          <c8y-li-checkbox></c8y-li-checkbox>
+          <c8y-li-icon icon="file"></c8y-li-icon>
+          Document {{ index + 1 }}
+        </c8y-li>
+      </c8y-list-group>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, CoreModule]
+})
+export class LargeModalExampleComponent {
+  labels: ModalLabels = { ok: 'Export', cancel: 'Cancel' };
+  listArray = new Array(12);
+  onDismiss(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Cancel" clicked');
+  }
+
+  onClose(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Export" clicked');
+  }
+}

package/src/modal/ngx-modal-sizes/medium-modal-example.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import {
+  CommonModule,
+  FormsModule,
+  HeaderModule,
+  ModalLabels,
+  ModalModule,
+  CoreModule
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-simple-modal',
+  template: `
+    <c8y-modal
+      title="Export documents"
+      (onClose)="onClose($event)"
+      (onDismiss)="onDismiss($event)"
+      [labels]="labels"
+      [disabled]="true"
+    >
+      <c8y-list-group>
+        <c8y-li *ngFor="let a of listArray; let index = index">
+          <c8y-li-checkbox></c8y-li-checkbox>
+          <c8y-li-icon icon="file"></c8y-li-icon>
+          Document {{ index + 1 }}
+        </c8y-li>
+      </c8y-list-group>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, CoreModule]
+})
+export class MediumModalExampleComponent {
+  labels: ModalLabels = { ok: 'Export', cancel: 'Cancel' };
+  listArray = new Array(12);
+  onDismiss(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Cancel" clicked');
+  }
+
+  onClose(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Export" clicked');
+  }
+}

package/src/modal/ngx-modal-sizes/ngx-modal-sizes-example.component.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import {
+  C8yTranslateModule,
+  CoreModule,
+  FormsModule,
+  HeaderModule,
+  ModalModule
+} from '@c8y/ngx-components';
+import { SmallModalExampleComponent } from './small-modal-example.component';
+import { MediumModalExampleComponent } from './medium-modal-example.component';
+import { LargeModalExampleComponent } from './large-modal-example.component';
+
+@Component({
+  selector: 'tut-ngx-modal-sizes',
+  template: `<div>
+    <c8y-title>ngx-bootstrap modal sizes example</c8y-title>
+    <div class="p-t-24 p-b-24 text-center">
+      <button class="btn btn-default m-8" type="button" (click)="openModalSm()">
+        Modal with size <code>modal-sm</code>
+      </button>
+    </div>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default m-8" type="button" (click)="openModalMd()">
+        Modal with size <code>modal-md</code>
+      </button>
+    </div>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default m-8" type="button" (click)="openModalLg()">
+        Modal with size <code>modal-lg</code>
+      </button>
+    </div>
+  </div>`,
+  standalone: true,
+  imports: [HeaderModule, C8yTranslateModule, FormsModule, ModalModule, CoreModule]
+})
+export class NgxModalSizesExampleComponent {
+  constructor(private modalService: BsModalService) {}
+
+  openModalSm() {
+    this.modalService.show(SmallModalExampleComponent, {
+      class: 'modal-sm',
+      ariaDescribedby: 'modal-body',
+      ariaLabelledBy: 'modal-title',
+      ignoreBackdropClick: true
+    }).content as SmallModalExampleComponent;
+  }
+
+  openModalMd() {
+    this.modalService.show(MediumModalExampleComponent, {
+      class: 'modal-md',
+      ariaDescribedby: 'modal-body',
+      ariaLabelledBy: 'modal-title',
+      ignoreBackdropClick: true
+    }).content as MediumModalExampleComponent;
+  }
+
+  openModalLg() {
+    this.modalService.show(LargeModalExampleComponent, {
+      class: 'modal-lg',
+      ariaDescribedby: 'modal-body',
+      ariaLabelledBy: 'modal-title',
+      ignoreBackdropClick: true
+    }).content as LargeModalExampleComponent;
+  }
+}

package/src/modal/ngx-modal-sizes/ngx-modal-sizes-example.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'modal/ngx-modal-sizes',
+      loadComponent: () =>
+        import('./ngx-modal-sizes-example.component').then(m => m.NgxModalSizesExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Ngx modal sizes',
+        path: '/modal/ngx-modal-sizes',
+        icon: 'list-alt',
+        priority: 20,
+        parent: 'Modal'
+      })
+    )
+  ]
+})
+export class NgxModalSizesExampleModule {}

package/src/modal/ngx-modal-sizes/small-modal-example.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import {
+  CommonModule,
+  FormsModule,
+  HeaderModule,
+  ModalLabels,
+  ModalModule,
+  CoreModule
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-simple-modal',
+  template: `
+    <c8y-modal
+      title="Export documents"
+      (onClose)="onClose($event)"
+      (onDismiss)="onDismiss($event)"
+      [labels]="labels"
+      [headerClasses]="'dialog-header'"
+      [disabled]="true"
+    >
+      <ng-container c8y-modal-title>
+        <span [c8yIcon]="'export'"></span>
+      </ng-container>
+      <c8y-list-group>
+        <c8y-li *ngFor="let a of listArray; let index = index">
+          <c8y-li-checkbox></c8y-li-checkbox>
+          <c8y-li-icon icon="file"></c8y-li-icon>
+          Document {{ index + 1 }}
+        </c8y-li>
+      </c8y-list-group>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, CoreModule]
+})
+export class SmallModalExampleComponent {
+  labels: ModalLabels = { ok: 'Export', cancel: 'Cancel' };
+  listArray = new Array(12);
+  onDismiss(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Cancel" clicked');
+  }
+
+  onClose(_) {
+    // eslint-disable-next-line no-console
+    console.log('On "Export" clicked');
+  }
+}

package/src/modal/simple-modal/modal-example.component.ts

@@ -1,34 +0,0 @@
-import { Component } from '@angular/core';
-import { ModalLabels, ModalModule } from '@c8y/ngx-components';
-import { Subject } from 'rxjs';
-
-@Component({
-  selector: 'modal-example',
-  template: `
-    <c8y-modal
-      title="CustomTitle"
-      (onClose)="onClose($event)"
-      (onDismiss)="onDismiss($event)"
-      [labels]="labels"
-      [disabled]="true"
-    >
-      <!--! will disable ok button -->
-      <span>I am body of modal</span>
-      <span>For simple string use body="string"</span>
-    </c8y-modal>
-  `,
-  standalone: true,
-  imports: [ModalModule]
-})
-export class ModalExampleComponent {
-  closeSubject: Subject<boolean> = new Subject();
-  labels: ModalLabels = { ok: 'customOK', cancel: 'customCancel' };
-
-  onDismiss(event) {
-    this.closeSubject.next(!event);
-  }
-
-  onClose(event) {
-    this.closeSubject.next(event);
-  }
-}

package/src/modal/simple-modal/modal.example.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
-
-@NgModule({
-  providers: [
-    hookRoute({
-      path: 'modal/simple-modal',
-      loadComponent: () => import('./modal-example.component').then(m => m.ModalExampleComponent)
-    }),
-    hookNavigator(
-      new NavigatorNode({
-        label: 'Simple Modal',
-        path: '/modal/simple-modal',
-        icon: 'list-alt',
-        priority: 2,
-        parent: 'Modal'
-      })
-    )
-  ]
-})
-export class ModalExampleModule {}