@c8y/tutorial 1019.0.3

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

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorModule, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'datapoint-selection-selector-example',
+  template: `<c8y-title>Data point selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-block d-flex d-col p-0" style="height: 300px">
+              <!-- important -->
+              <c8y-datapoint-selector
+                class="d-contents"
+                [allowDatapointsFromMultipleAssets]="true"
+                [(ngModel)]="datapoints"
+              >
+              </c8y-datapoint-selector>
+              <!-- /important -->
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoints | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, CoreModule, AssetSelectorModule, DatapointSelectorModule]
+})
+export class DatapointSelectionSelectorExampleComponent {
+  datapoints: KPIDetails[] = [];
+}

package/src/selector/datapoint-selection-example/selector/datapoint-selection-selector-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/selector',
+      loadComponent: () =>
+        import('./datapoint-selection-selector-example.component').then(
+          m => m.DatapointSelectionSelectorExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'selector',
+        path: '/selector/datapoint-selection-example/selector',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionSelectorExampleModule {}

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

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorModule, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'datapoint-selection-validation-example',
+  template: `<c8y-title>Data point selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-inner-scroll d-flex d-col bg-component" style="height: 350px">
+              <!-- important -->
+              <c8y-datapoint-selection-list
+                class="d-contents"
+                [(ngModel)]="datapoints"
+                [allowDragAndDrop]="false"
+              >
+                <div class="alert alert-danger" role="alert" translate>
+                  Some validation error message
+                </div>
+              </c8y-datapoint-selection-list>
+              <!-- /important -->
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoints | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, CoreModule, AssetSelectorModule, DatapointSelectorModule]
+})
+export class DatapointSelectionValidationExampleComponent {
+  datapoints: KPIDetails[] = [];
+}

package/src/selector/datapoint-selection-example/validation-example/datapoint-selection-validation-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/validation-example',
+      loadComponent: () =>
+        import('./datapoint-selection-validation-example.component').then(
+          m => m.DatapointSelectionValidationExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'validation error',
+        path: '/selector/datapoint-selection-example/validation-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionValidationExampleModule {}

package/src/standalone-demo/index.ts

@@ -0,0 +1 @@
+export * from './standalone-demo.module';

package/src/standalone-demo/standalone-component/standalone-component.component.html

@@ -0,0 +1,4 @@
+<c8y-title>Standalone component demo</c8y-title>
+<p>
+  standalone-component works!
+</p>

package/src/standalone-demo/standalone-component/standalone-component.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'app-standalone-component',
+  templateUrl: './standalone-component.component.html',
+  standalone: true,
+  // imports done here instead of a separate ng module.
+  imports: [HeaderModule]
+})
+export class StandaloneComponentComponent {}

package/src/standalone-demo/standalone-demo.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  // no declaration of StandaloneComponentComponent here.
+  providers: [
+    hookRoute({
+      path: 'standalone-demo',
+      loadComponent: () =>
+        import('./standalone-component/standalone-component.component').then(
+          m => m.StandaloneComponentComponent
+        )
+    }),
+    hookNavigator({
+      path: 'standalone-demo',
+      icon: 'single-page-mode',
+      label: 'NG Standalone Component'
+    })
+  ]
+})
+export class StandaloneDemoModule {}

package/src/stepper/device-stepper.component.html

@@ -0,0 +1,70 @@
+<div class="p-b-16">
+  <div *ngIf="isModal" class="modal-header modal-header-primary text-center">
+    <i [c8yIcon]="'diamond'" style="font-size: 32px"></i>
+    <h3 id="modal-title" class="p-t-16">{{ 'Create a new device ' }}</h3>
+  </div>
+  <c8y-stepper
+    (onStepChange)="navigate($event)"
+    [disableDefaultIcons]="{ edit: true, done: false }"
+    [customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
+    id="modal-body"
+    linear
+  >
+    <!-- override icons -->
+    <ng-template c8yStepperIcon="final">
+      <span [c8yIcon]="'hand-peace-o'"></span>
+    </ng-template>
+    <cdk-step [stepControl]="formGroupStepOne" label="Device name">
+      <div class="m-l-40 m-r-40 m-t-32">
+        <h4 title="Device name" class="p-b-8">Enter the device name</h4>
+        <c8y-form-group>
+          <div [formGroup]="formGroupStepOne">
+            <input
+              class="form-control"
+              type="text"
+              formControlName="name"
+              placeholder="MyDevice"
+              #nameRef
+              required
+            />
+            <c8y-messages>
+              <c8y-message [name]="'required'" [text]="'Enter the name of the Device'"></c8y-message>
+            </c8y-messages>
+          </div>
+        </c8y-form-group>
+      </div>
+      <c8y-stepper-buttons></c8y-stepper-buttons>
+    </cdk-step>
+    <cdk-step [stepControl]="formGroupStepTwo" label="Device type">
+      <div class="m-l-40 m-r-40 m-t-32">
+        <h4 title="Enter device type" class="p-b-8">Enter the device type</h4>
+        <c8y-form-group>
+          <div [formGroup]="formGroupStepTwo">
+            <input
+              class="form-control"
+              type="any"
+              formControlName="type"
+              placeholder="e.g. phone"
+            />
+          </div>
+        </c8y-form-group>
+      </div>
+      <c8y-stepper-buttons
+        title="Save device"
+        (onNext)="save()"
+        [labels]="{ next: 'Save' }"
+        [pending]="pendingStatus"
+      ></c8y-stepper-buttons>
+    </cdk-step>
+    <!-- Final step -->
+    <cdk-step state="final" label="Job done!">
+      <div class="m-l-40 m-r-40 m-t-32">
+        <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
+      </div>
+      <c8y-stepper-buttons
+        (onBack)="close(isModal)"
+        [labels]="{ back: 'Got it!' }"
+      ></c8y-stepper-buttons>
+    </cdk-step>
+  </c8y-stepper>
+</div>

package/src/stepper/device-stepper.component.ts

@@ -0,0 +1,98 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+  FormGroup,
+  Validators,
+  FormBuilder,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { C8yStepper, CoreModule } from '@c8y/ngx-components';
+import { StepperService } from './stepper.service';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Subject } from 'rxjs';
+import { upperFirst } from 'lodash';
+
+enum step {
+  FIRST = 0,
+  SECOND = 1,
+  THIRD = 2
+}
+@Component({
+  selector: 'c8y-stepper-device',
+  templateUrl: './device-stepper.component.html',
+  standalone: true,
+  imports: [CoreModule, FormsModule, ReactiveFormsModule]
+})
+export class DeviceStepperComponent implements OnInit {
+  formGroupStepOne: FormGroup;
+  formGroupStepTwo: FormGroup;
+
+  pendingStatus = false;
+
+  @ViewChild(C8yStepper, { static: true })
+  stepper: C8yStepper;
+  isModal: boolean;
+
+  private onClose: Subject<any> = new Subject();
+  constructor(
+    private fb: FormBuilder,
+    private stepperService: StepperService,
+    private bsModalRef: BsModalRef
+  ) {}
+
+  ngOnInit() {
+    this.formGroupStepOne = this.fb.group({
+      name: ['', Validators.required]
+    });
+
+    this.formGroupStepTwo = this.fb.group({
+      type: ['']
+    });
+  }
+
+  navigate(clickedStepIDX: number) {
+    console.log('Index is: ', clickedStepIDX);
+  }
+
+  onMovingForward(clickedStepIDX: number, selectedStepIDX: number) {
+    this.stepper.next();
+    if (clickedStepIDX === step.THIRD && selectedStepIDX === step.SECOND) {
+      this.save();
+    }
+  }
+  onMovingBackward(clickedStepIDX: number, selectedStepIDX: number) {
+    if ((clickedStepIDX === step.FIRST || step.SECOND) && selectedStepIDX === step.THIRD) {
+      this.resetStepper();
+    } else if (clickedStepIDX === step.FIRST && selectedStepIDX === step.SECOND) {
+      this.stepper.previous();
+    }
+  }
+  async save() {
+    this.pendingStatus = true;
+    await this.addDevice();
+    this.pendingStatus = false;
+    this.stepper.next();
+  }
+
+  close(isModal: boolean) {
+    if (isModal) {
+      this.onClose.next(null);
+      this.bsModalRef.hide();
+    } else {
+      this.resetStepper();
+    }
+  }
+
+  private async addDevice() {
+    await this.stepperService.addDevice({
+      id: Math.random() * 1000,
+      name: upperFirst(this.formGroupStepOne.get('name').value),
+      type: upperFirst(this.formGroupStepTwo.get('type').value)
+    });
+  }
+
+  private resetStepper() {
+    this.stepper.reset();
+    this.stepper.selectedIndex = 1;
+  }
+}

package/src/stepper/device.model.ts

@@ -0,0 +1,5 @@
+export interface Device {
+  id?: number;
+  name?: string;
+  type?: string;
+}

package/src/stepper/index.ts

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

package/src/stepper/stepper.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+import { DeviceStepperComponent } from './device-stepper.component';
+
+@Component({
+  selector: 'stepper',
+  template: `<c8y-title>Stepper</c8y-title>
+    <div class="card">
+      <div class="card-header separator">
+        <h4 class="card-title">Create new device</h4>
+      </div>
+      <div class="card-block">
+        <c8y-stepper-device></c8y-stepper-device>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [HeaderModule, DeviceStepperComponent]
+})
+export class StepperComponent {}

package/src/stepper/stepper.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CoreModule, NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { StepperService } from './stepper.service';
+
+@NgModule({
+  imports: [CoreModule, FormsModule, ReactiveFormsModule],
+  providers: [
+    StepperService,
+    hookRoute({
+      path: 'stepper',
+      loadComponent: () => import('./stepper.component').then(m => m.StepperComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Stepper',
+        path: '/stepper',
+        icon: 'step-forward',
+        priority: 10
+      })
+    )
+  ]
+})
+export class StepperModule {}

package/src/stepper/stepper.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Device } from './device.model';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { DeviceStepperComponent } from './device-stepper.component';
+/**
+ * With the help of this service you can add or remove devices.
+ */
+@Injectable()
+export class StepperService {
+  private devices: Device[];
+
+  constructor(private modalService: BsModalService) {
+    this.devices = [];
+  }
+
+  addDevice(device: Device) {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        this.devices.push(device);
+        resolve(true);
+      }, 2000);
+    });
+  }
+
+  modalCreateDevice() {
+    this.modalService.show(DeviceStepperComponent, {
+      class: 'modal-lg',
+      ariaDescribedby: 'modal-body',
+      ariaLabelledBy: 'modal-title'
+    });
+  }
+}

package/src/time/time-picker-example.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { HeaderModule, TimePickerModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'time-picker-example',
+  template: `<c8y-title>Time picker</c8y-title>
+    <c8y-time-picker [formControl]="form.get('time')"></c8y-time-picker>`,
+  standalone: true,
+  imports: [TimePickerModule, ReactiveFormsModule, HeaderModule]
+})
+export class TimePickerExampleComponent {
+  form: FormGroup;
+
+  constructor() {
+    this.form = new FormGroup({});
+    this.form.addControl('time', new FormControl(null));
+  }
+}

package/src/time/time-picker-example.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'time-picker',
+      loadComponent: () =>
+        import('./time-picker-example.component').then(m => m.TimePickerExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Time picker',
+        path: '/time-picker',
+        icon: 'realtime',
+        priority: 10
+      })
+    )
+  ]
+})
+export class TimePickerExampleModule {}

package/src/translations/date-translation/c8y-translation/c8y-date-translation.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-date-translation',
+  template: `
+    <c8y-title>Date translation by c8yDate pipe</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <div>This date will be translated: {{ currentDate | c8yDate }}.</div>
+        <div>
+          This date exceeding the range supported by ECMAScript will be translated:
+          {{ 8640000000000000 + 1 | c8yDate }}.
+        </div>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class C8yDateTranslationComponent {
+  currentDate = new Date();
+}

package/src/translations/date-translation/c8y-translation/c8y-date-translation.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/date-translation/c8y-translation',
+      loadComponent: () =>
+        import('./c8y-date-translation.component').then(m => m.C8yDateTranslationComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 996,
+        path: 'translations/date-translation/c8y-translation',
+        icon: 'rocket',
+        label: 'Date translation by c8y pipe',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class C8yDateTranslationModule {}

package/src/translations/date-translation/ng-translation/date-translation.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'date-translation',
+  template: `<c8y-title>Date translation by Angular pipe</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        This date will be translated: {{ currentDate | date: 'medium' }}.
+      </div>
+    </div>`,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class DateTranslationComponent {
+  currentDate = new Date();
+}

package/src/translations/date-translation/ng-translation/date-translation.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/text-translation/ng-translation',
+      loadComponent: () =>
+        import('./date-translation.component').then(m => m.DateTranslationComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 995,
+        path: 'translations/text-translation/ng-translation',
+        icon: 'rocket',
+        label: 'Date translation by Angular pipe',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class DateTranslationModule {}

package/src/translations/dynamic-form-translation/dynamic-form-translation.component.ts

@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { CoreModule, DynamicFormsModule, gettext } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'dynamic-form-translation',
+  template: `
+    <c8y-title>Dynamic form translation</c8y-title>
+    <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
+      <div class="card-block">
+        <formly-form [form]="form" [fields]="fields"></formly-form>
+      </div>
+      <div class="card-footer">
+        <button class="btn btn-default" title="Reset" type="reset">Reset</button>
+        <button class="btn btn-primary" title="Submit" type="submit">Submit</button>
+      </div>
+    </form>
+  `,
+  standalone: true,
+  imports: [CoreModule, DynamicFormsModule]
+})
+export class DynamicFormTranslationComponent {
+  form = new FormGroup({});
+  fields: FormlyFieldConfig[] = [
+    {
+      key: 'radio',
+      type: 'radio',
+      templateOptions: {
+        label: gettext('Select action'),
+        description: gettext('some description…'),
+        options: [
+          {
+            value: '1',
+            label: gettext('Upload web application')
+          },
+          {
+            value: '2',
+            label: gettext('Upload microservice')
+          }
+        ]
+      }
+    },
+    {
+      key: 'text',
+      type: 'input',
+      templateOptions: {
+        label: gettext('Text input'),
+        placeholder: gettext('You can provide some examples displayed as placeholder…'),
+        description: gettext('…and some short description.')
+      }
+    }
+  ];
+
+  onSubmit() {
+    console.log('The form is submitted.');
+  }
+}

package/src/translations/dynamic-form-translation/dynamic-form-translation.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/dynamic-form-translation',
+      loadComponent: () =>
+        import('./dynamic-form-translation.component').then(m => m.DynamicFormTranslationComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 994,
+        path: 'translations/dynamic-form-translation',
+        icon: 'rocket',
+        label: 'Dynamic form translation',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class DynamicFormTranslationModule {}

package/src/translations/index.ts

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