@c8y/tutorial 1019.6.10 → 1019.7.10

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');
+  }
+}