UI: resolve ts-strict and angular compatibility (#2687)

* fix: resolve ts-strict -- angular compatibility

This change add non-null assertion to angular mandatory component
inputs and marked as `required` in input decolation argument.

problem background

 - typescript strictPropertyInitialization option check non-initialized
   property.
 - In angular mandatory component inputs has no initialization in ts
   code.
 - strictPropertyInitialization dont consider it, so the checking point
   mandatory component inputs as error.

detail procedure for addressing problem

 1. finding non-initialized property in angular components.
 2. regarding these inputs will be initialized in angular lifecycle
    (=> mandatory component inputs).
 3. marking these inputs peroperty type as non-null assertion type(!).
 3. marking these inputs as required directive({ required: true }).

ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/chart/chart.ts

@@ -13,7 +13,7 @@ import { ColorUtils } from 'src/app/shared/utils/color/color.utils';
 })
 export class ChartComponent extends AbstractHistoryChart {
 
- @Input() public override component: EdgeConfig.Component;
+ @Input({ required: true }) public override component!: EdgeConfig.Component;
 
  private currencyLabel: Currency.Label; // Default
 

ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/flat/flat.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from '@angular/core';
 
 import { AbstractFlatWidget } from 'src/app/shared/genericComponents/flat/abstract-flat-widget';
@@ -11,7 +10,7 @@ import { ChannelAddress, CurrentData } from 'src/app/shared/shared';
 })
 export class FlatComponent extends AbstractFlatWidget {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
 
  protected delayedActiveTimeOverPeriod: number | null = null;
  protected chargedConsumptionActiveTimeOverPeriod: number | null = null;

ui/src/app/edge/history/chpsoc/chart.component.ts

@@ -14,8 +14,8 @@ import { YAxisTitle } from 'src/app/shared/service/utils';
 })
 export class ChpSocChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/chpsoc/widget.component.ts

@@ -14,8 +14,8 @@ import { calculateActiveTimeOverPeriod } from '../shared';
 })
 export class ChpSocWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "chpsocWidget";
 

ui/src/app/edge/history/delayedselltogrid/chart.component.ts

@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class DelayedSellToGridChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/delayedselltogrid/widget.component.ts

@@ -10,8 +10,8 @@ import { Edge, Service, EdgeConfig } from 'src/app/shared/shared';
 })
 export class DelayedSellToGridWidgetComponent implements OnInit {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "delayedSellToGridWidget";
 

ui/src/app/edge/history/fixdigitaloutput/singlechart.component.ts

@@ -16,8 +16,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class FixDigitalOutputSingleChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/fixdigitaloutput/totalchart.component.ts

@@ -15,7 +15,7 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class FixDigitalOutputTotalChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/fixdigitaloutput/widget.component.ts

@@ -14,8 +14,8 @@ import { calculateActiveTimeOverPeriod } from '../shared';
 })
 export class FixDigitalOutputWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
  private config: EdgeConfig = null;
  public component: EdgeConfig.Component = null;
 

ui/src/app/edge/history/grid/chart.component.ts

@@ -15,8 +15,8 @@ import * as Chart from 'chart.js';
 })
 export class GridChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public showPhases: boolean;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public showPhases!: boolean;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/gridoptimizedcharge/chart.component.ts

@@ -16,8 +16,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class GridOptimizedChargeChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public component: EdgeConfig.Component;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/gridoptimizedcharge/sellToGridLimitChart.component.ts

@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class SellToGridLimitChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public component: EdgeConfig.Component;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
 
  private gridMeter: string;
 

ui/src/app/edge/history/gridoptimizedcharge/widget.component.ts

@@ -12,8 +12,8 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class GridOptimizedChargeWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "gridOptimizedChargeWidget";
 

ui/src/app/edge/history/heatingelement/chart.component.ts

@@ -17,8 +17,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class HeatingelementChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public component: EdgeConfig.Component;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/heatingelement/widget.component.ts

@@ -13,8 +13,8 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class HeatingelementWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "heatingelementWidget";
 

ui/src/app/edge/history/heatpump/chart.component.ts

@@ -15,8 +15,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class HeatPumpChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public component: EdgeConfig.Component;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/heatpump/widget.component.ts

@@ -13,8 +13,8 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class HeatpumpWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "heatpumpWidget";
 

ui/src/app/edge/history/peakshaving/asymmetric/chart.component.ts

@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../../abstracthistorychart';
 })
 export class AsymmetricPeakshavingChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public component: EdgeConfig.Component;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/peakshaving/asymmetric/widget.component.ts

@@ -10,8 +10,8 @@ import { Edge, Service, EdgeConfig } from 'src/app/shared/shared';
 })
 export class AsymmetricPeakshavingWidgetComponent implements OnInit {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "asymmetricPeakshavingWidget";
 

ui/src/app/edge/history/peakshaving/symmetric/chart.component.ts

@@ -13,8 +13,8 @@ import { AbstractHistoryChart } from '../../abstracthistorychart';
 })
 export class SymmetricPeakshavingChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/peakshaving/symmetric/widget.component.ts

@@ -10,8 +10,8 @@ import { Edge, EdgeConfig, Service } from 'src/app/shared/shared';
 })
 export class SymmetricPeakshavingWidgetComponent implements OnInit {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "symmetricPeakshavingWidget";
 

ui/src/app/edge/history/peakshaving/timeslot/chart.component.ts

@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../../abstracthistorychart';
 })
 export class TimeslotPeakshavingChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/peakshaving/timeslot/widget.component.ts

@@ -10,8 +10,8 @@ import { Edge, EdgeConfig, Service } from 'src/app/shared/shared';
 })
 export class TimeslotPeakshavingWidgetComponent implements OnInit {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "timeslotPeakshavingWidget";
 

ui/src/app/edge/history/singlethreshold/chart.component.ts

@@ -17,9 +17,9 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class SinglethresholdChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
- @Input() public inputChannelUnit: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
+ @Input({ required: true }) public inputChannelUnit!: string;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/singlethreshold/widget.component.ts

@@ -14,8 +14,8 @@ import { calculateActiveTimeOverPeriod } from '../shared';
 })
 export class SinglethresholdWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private static readonly SELECTOR = "singlethresholdWidget";
 

ui/src/app/edge/history/storage/chargerchart.component.ts

@@ -13,8 +13,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class StorageChargerChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
 
  private moreThanOneProducer: boolean = null;
 

ui/src/app/edge/history/storage/esschart.component.ts

@@ -14,9 +14,9 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 export class StorageESSChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public componentId: string;
- @Input() public showPhases: boolean;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public componentId!: string;
+ @Input({ required: true }) public showPhases!: boolean;
 
  private moreThanOneProducer: boolean = null;
 

ui/src/app/edge/history/storage/singlechart.component.ts

@@ -16,8 +16,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class StorageSingleChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public showPhases: boolean;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public showPhases!: boolean;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/storage/socchart.component.ts

@@ -14,7 +14,7 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class SocStorageChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
  private emergencyCapacityReserveComponents: EdgeConfig.Component[] = [];
 
  public ngOnChanges() {

ui/src/app/edge/history/storage/totalchart.component.ts

@@ -15,8 +15,8 @@ import { formatNumber } from '@angular/common';
  templateUrl: '../abstracthistorychart.html',
 })
 export class StorageTotalChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
- @Input() public period: DefaultTypes.HistoryPeriod;
- @Input() public showPhases: boolean;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public showPhases!: boolean;
 
  ngOnChanges() {
  this.updateChart();

ui/src/app/edge/history/storage/widget.component.ts

@@ -12,7 +12,7 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class StorageComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
- @Input() public period: DefaultTypes.HistoryPeriod;
+ @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
 
  private static readonly SELECTOR = "storageWidget";
 

ui/src/app/edge/live/Controller/ChpSoc/modal/modal.component.ts

@@ -17,10 +17,10 @@ export class Controller_ChpSocModalComponent implements OnInit {
 
  private static readonly SELECTOR = "chpsoc-modal";
 
- @Input() public edge: Edge;
- @Input() public component: EdgeConfig.Component;
- @Input() public outputChannel: ChannelAddress;
- @Input() public inputChannel: ChannelAddress;
+ @Input({ required: true }) public edge!: Edge;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
+ @Input({ required: true }) public outputChannel!: ChannelAddress;
+ @Input({ required: true }) public inputChannel!: ChannelAddress;
 
  public thresholds: RangeValue = {
  lower: null,

ui/src/app/edge/live/Controller/Ess/GridOptimizedCharge/modal/predictionChart.ts

@@ -15,11 +15,11 @@ import { ChannelAddress, Edge, EdgeConfig, Service, Utils } from 'src/app/shared
 })
 export class PredictionChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() protected refresh: boolean;
- @Input() protected override edge: Edge;
- @Input() public component: EdgeConfig.Component;
- @Input() public targetEpochSeconds: number;
- @Input() public chargeStartEpochSeconds: number;
+ @Input({ required: true }) protected refresh!: boolean;
+ @Input({ required: true }) protected override edge!: Edge;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
+ @Input({ required: true }) public targetEpochSeconds!: number;
+ @Input({ required: true }) public chargeStartEpochSeconds!: number;
 
  private static DEFAULT_PERIOD: DefaultTypes.HistoryPeriod = new DefaultTypes.HistoryPeriod(new Date(), new Date());
 

ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/powerSocChart.ts

@@ -18,9 +18,9 @@ import { GetScheduleResponse } from '../../../../../../shared/jsonrpc/response/g
 })
 export class SchedulePowerAndSocChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public refresh: boolean;
- @Input() public override edge: Edge;
- @Input() public component: EdgeConfig.Component;
+ @Input({ required: true }) public refresh!: boolean;
+ @Input({ required: true }) public override edge!: Edge;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
 
  public ngOnChanges() {
  this.updateChart();

ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/statePriceChart.ts

@@ -21,9 +21,9 @@ import { Controller_Ess_TimeOfUseTariff } from '../Ess_TimeOfUseTariff';
 })
 export class ScheduleStateAndPriceChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
- @Input() public refresh: boolean;
- @Input() public override edge: Edge;
- @Input() public component: EdgeConfig.Component;
+ @Input({ required: true }) public refresh!: boolean;
+ @Input({ required: true }) public override edge!: Edge;
+ @Input({ required: true }) public component!: EdgeConfig.Component;
 
  private currencyLabel: Currency.Label; // Default