Angular 20 migration

ui-ngx/package.json

@@ -14,12 +14,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "19.2.18",
-    "@angular/cdk": "18.2.14",
+    "@angular/cdk": "19.2.19",
     "@angular/common": "19.2.18",
     "@angular/compiler": "19.2.18",
     "@angular/core": "19.2.18",
     "@angular/forms": "19.2.18",
-    "@angular/material": "18.2.14",
+    "@angular/material": "19.2.19",
     "@angular/platform-browser": "19.2.18",
     "@angular/platform-browser-dynamic": "19.2.18",
     "@angular/router": "19.2.18",
@@ -28,7 +28,7 @@
     "@flowjs/ngx-flow": "18.0.1",
     "@geoman-io/leaflet-geoman-free": "2.18.3",
     "@iplab/ngx-color-picker": "^18.0.1",
-    "@mat-datetimepicker/core": "~14.0.0",
+    "@mat-datetimepicker/core": "~15.0.2",
     "@mdi/svg": "^7.4.47",
     "@messageformat/core": "^3.4.0",
     "@ngrx/effects": "^18.1.1",

ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html

@@ -29,7 +29,7 @@
     <mat-form-field appearance="outline">
       <mat-label translate>layout.breakpoint</mat-label>
       <mat-select formControlName="newBreakpointId" [hideSingleSelectionIndicator]="false">
-        <mat-select-trigger>{{ getName(this.addBreakpointFormGroup.get('newBreakpointId').value) }}</mat-select-trigger>
+        <mat-select-trigger>{{ getName(addBreakpointFormGroup.get('newBreakpointId').value) }}</mat-select-trigger>
         <mat-option *ngFor="let breakpoint of allowBreakpointIds" [value]="breakpoint" style="min-height:56px;">
           <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
           <div>{{ getName(breakpoint) }}</div>
@@ -40,7 +40,7 @@
     <mat-form-field appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>layout.copy-from</mat-label>
       <mat-select formControlName="copyFrom" [hideSingleSelectionIndicator]="false">
-        <mat-select-trigger>{{ getName(this.addBreakpointFormGroup.get('copyFrom').value) }}</mat-select-trigger>
+        <mat-select-trigger>{{ getName(addBreakpointFormGroup.get('copyFrom').value) }}</mat-select-trigger>
         <mat-option *ngFor="let breakpoint of selectedBreakpointIds" [value]="breakpoint" style="min-height:56px;">
           <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
           <div>{{ getName(breakpoint) }}</div>

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html

@@ -143,7 +143,7 @@
             color="primary"
             *ngIf="showNext"
             [disabled]="(isLoading$ | async)"
-            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
+            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
   <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end gap-2">

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html

@@ -34,7 +34,7 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addServerConfig()">
-      <span>{{ (this.isBootstrapServerNotAvailable() ? 'device-profile.lwm2m.add-lwm2m-server-config' :
+      <span>{{ (isBootstrapServerNotAvailable() ? 'device-profile.lwm2m.add-lwm2m-server-config' :
         'device-profile.lwm2m.add-server-config') | translate }}</span>
     </button>
   </div>

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html

@@ -30,7 +30,7 @@
           </div>
           <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="warn"
-                          [disabled]="this.disabled"
+                          [disabled]="disabled"
                           [checked]="getChecked(instances, 'attribute')"
                           (click)="$event.stopPropagation()"
                           (change)="changeInstanceResourcesCheckBox($event.checked, instances, 'attribute')"
@@ -39,7 +39,7 @@
           </div>
           <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="primary"
-                          [disabled]="this.disabled"
+                          [disabled]="disabled"
                           [checked]="getChecked(instances, 'telemetry')"
                           (click)="$event.stopPropagation()"
                           (change)="changeInstanceResourcesCheckBox($event.checked, instances, 'telemetry')"

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html

@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
+<div #valueCardPanel class="tb-value-card-panel" [class]="layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-value-card-overlay" [style]="overlayStyle"></div>
   <div class="tb-value-card-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #valueCardContent class="tb-value-card-content" [class]="this.layout">
+  <div #valueCardContent class="tb-value-card-content" [class]="layout">
     <ng-container [ngSwitch]="layout">
       <ng-template [ngSwitchCase]="valueCardLayout.square">
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>

ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html

@@ -20,7 +20,7 @@
   <div class="tb-status-widget-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout" [style.padding]="padding">
+  <div #statusWidgetContent class="tb-status-widget-content" [class]="layout" [style.padding]="padding">
     <div class="tb-status-widget-icon-container">
       <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html

@@ -39,10 +39,10 @@
         <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" required>
-          <mat-error *ngIf="this.persistentFormGroup.get('method').hasError('required')">
+          <mat-error *ngIf="persistentFormGroup.get('method').hasError('required')">
             {{'widgets.persistent-table.method-error' | translate}}
           </mat-error>
-          <mat-error *ngIf="this.persistentFormGroup.get('method').hasError('pattern')">
+          <mat-error *ngIf="persistentFormGroup.get('method').hasError('pattern')">
             {{'widgets.persistent-table.white-space-error' | translate}}
           </mat-error>
         </mat-form-field>

ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html

@@ -20,7 +20,7 @@
   <div class="tb-single-switch-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #singleSwitchContent class="tb-single-switch-content" [class]="this.layout" [class.no-label]="!showIcon && !showLabel" [class.auto-scale]="autoScale">
+  <div #singleSwitchContent class="tb-single-switch-content" [class]="layout" [class.no-label]="!showIcon && !showLabel" [class.auto-scale]="autoScale">
     <div *ngIf="showIcon || showLabel" #singleSwitchLabelRow class="tb-single-switch-label-row">
       <tb-icon *ngIf="showIcon" [style]="iconStyle"
                [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.iconColor">{{ icon }}</tb-icon>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html

@@ -90,7 +90,7 @@
           <div>{{ widgetButtonStateTranslationMap.get(state) | translate }}</div>
           <tb-widget-button-custom-style
             [state]="state"
-            [appearance]="this.appearanceFormGroup.value"
+            [appearance]="appearanceFormGroup.value"
             [borderRadius]="borderRadius"
             [autoScale]="autoScale"
             [formControlName]="state">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-action-button-row.component.html

@@ -27,7 +27,7 @@
       warning
     </mat-icon>
   </mat-form-field>
-  <tb-material-icon-select formControlName="icon" asBoxInput iconClearButton [color]="this.mapActionButton.get('color').value"></tb-material-icon-select>
+  <tb-material-icon-select formControlName="icon" asBoxInput iconClearButton [color]="mapActionButton.get('color').value"></tb-material-icon-select>
   <tb-color-input formControlName="color" asBoxInput required></tb-color-input>
   <tb-widget-action-settings class="min-w-32" style="flex: 1 1 60%"
                              formControlName="action"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.html

@@ -19,7 +19,7 @@
   <div translate>widgets.maps.data-layer.tooltip-tag-actions</div>
   <div class="flex min-w-0 flex-1 flex-row items-center justify-end gap-4 xs:justify-between">
     <mat-chip-listbox class="min-w-0">
-      <mat-chip *ngFor="let action of this.actionsFormGroup.get('actions').value; let $index = index;"
+      <mat-chip *ngFor="let action of actionsFormGroup.get('actions').value; let $index = index;"
                 class="tb-tag-action-chip"
                 [removable]="!disabled" (removed)="removeAction($index)">
         <div class="flex flex-row items-center justify-start gap-1">

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html

@@ -108,7 +108,7 @@
             color="primary"
             *ngIf="showNext"
             [disabled]="(isLoading$ | async)"
-            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
+            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
   <div class="dialog-actions-row">

ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html

@@ -45,8 +45,8 @@
   <tb-calculated-fields-table [active]="calculatedFieldsTab.isActive" [entityId]="entity.id" [entityName]="entity.name"/>
 </mat-tab>
 <mat-tab *ngIf="entity" #alarmRules="matTab"
-         label="{{ this.detailsForm.get('profileData.alarms').value?.length
-         ? ('device-profile.alarm-rules-with-count' | translate: { count: this.detailsForm.get('profileData.alarms').value.length })
+         label="{{ detailsForm.get('profileData.alarms').value?.length
+         ? ('device-profile.alarm-rules-with-count' | translate: { count: detailsForm.get('profileData.alarms').value.length })
          : 'device-profile.alarm-rules' | translate }}">
   <div class="mat-padding" [formGroup]="detailsForm" *ngIf="alarmRules.isActive">
     <div formGroupName="profileData">

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html

@@ -89,7 +89,7 @@
                         labelText="{{ 'admin.oauth2.clients' | translate }}"
                         placeholderText="{{ 'admin.oauth2.add-client' | translate }}">
           <button mat-button color="primary" matSuffix
-                  [disabled]="this.oauthForms.get('oauth2ClientIds').disabled"
+                  [disabled]="oauthForms.get('oauth2ClientIds').disabled"
                   (click)="createClient($event)">
             <span style="white-space: nowrap">{{ 'admin.oauth2.create-new' | translate }}</span>
           </button>

ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html

@@ -130,7 +130,7 @@
           </mat-checkbox>
         </section>
         <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-xs:gap-2"
-             *ngIf="!(isAdd && this.entityForm.get('generateChecksum').value)">
+             *ngIf="!(isAdd && entityForm.get('generateChecksum').value)">
           <mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
             <mat-label translate>ota-update.checksum-algorithm</mat-label>
             <mat-select formControlName="checksumAlgorithm">

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html

@@ -40,7 +40,7 @@
               </mat-error>
             </mat-form-field>
             <div class="flex flex-col items-center justify-start gap-4 gt-xs:flex-row gt-xs:items-start gt-xs:justify-center">
-              <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async) || this.clicked">
+              <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async) || clicked">
                 {{ 'login.request-password-reset' | translate }}
               </button>
               <button mat-button type="button" [disabled]="(isLoading$ | async)"

ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.html

@@ -43,7 +43,7 @@
     @for (key of filteredKeys$ | async; track key) {
       <mat-option [value]="key"><span [innerHTML]="key | highlight: searchText"></span></mat-option>
     } @empty {
-      @if (!this.keyControl.value) {
+      @if (!keyControl.value) {
         <mat-option [value]="''">{{ 'entity.no-keys-found' | translate }}</mat-option>
       }
     }

ui-ngx/src/app/shared/components/js-func-module-row.component.html

@@ -37,14 +37,14 @@
                             placeholder="{{ 'widget-config.set' | translate }}">
   </tb-resource-autocomplete>
   <div class="tb-form-table-row-cell-buttons">
-    <div [tb-help-popup-async-content]="this.moduleRowFormGroup.get('moduleLink').value ? moduleDescription : null"
+    <div [tb-help-popup-async-content]="moduleRowFormGroup.get('moduleLink').value ? moduleDescription : null"
          tb-help-popup-placement="top"
          [tb-help-popup-style]="{marginTop: '8px'}"
          help-icon-button-class=""
          help-icon="info_outline"
          help-opened-icon="info"
          help-icon-tooltip="{{ 'js-func.show-module-info' | translate }}"></div>
-    <div [tb-help-popup-async-content]="this.moduleRowFormGroup.get('moduleLink').value ? moduleSourceCode : null"
+    <div [tb-help-popup-async-content]="moduleRowFormGroup.get('moduleLink').value ? moduleSourceCode : null"
          tb-help-popup-placement="top"
          [tb-help-popup-style]="{marginTop: '8px'}"
          help-icon-button-class=""

ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html

@@ -39,7 +39,7 @@
                     #packageAutocomplete="matAutocomplete"
                     [displayWith]="displayPackageFn">
     <mat-option *ngFor="let package of filteredPackages | async" [value]="package">
-      <span [innerHTML]="this.packageTitleText(package) | highlight:searchText"></span>
+      <span [innerHTML]="packageTitleText(package) | highlight:searchText"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredPackages | async)?.length" [value]="null" class="tb-not-found">
       <div class="tb-not-found-content" (click)="$event.stopPropagation()">

ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html

@@ -27,8 +27,8 @@
             <mat-slider [min]="minTimeIndex" [max]="maxTimeIndex" #ngSlider><input matSliderThumb [(ngModel)]="index"  (input)="changeIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
             </mat-slider>
             <div class="panel-timer">
-                <span *ngIf="this.currentTime">{{ this.currentTime | date:'medium'}}</span>
-                <span *ngIf="!this.currentTime">{{ "widget.no-data-found" | translate}}</span>
+                <span *ngIf="currentTime">{{ currentTime | date:'medium'}}</span>
+                <span *ngIf="!currentTime">{{ "widget.no-data-found" | translate}}</span>
             </div>
         </div>
         <button mat-icon-button class="mat-icon-button" aria-label="Next" (click)="moveNext()">

ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html

@@ -119,17 +119,17 @@
       <mat-step>
         <ng-template matStepLabel>{{ 'action.done' | translate }}</ng-template>
         <div class="flex flex-col">
-          <p class="mat-body-2" *ngIf="this.statistical?.created">
-            {{ translate.instant('import.message.create-entities', {count: this.statistical.created}) }}
+          <p class="mat-body-2" *ngIf="statistical?.created">
+            {{ translate.instant('import.message.create-entities', {count: statistical.created}) }}
           </p>
-          <p class="mat-body-2" *ngIf="this.statistical?.updated">
-            {{ translate.instant('import.message.update-entities', {count: this.statistical.updated}) }}
+          <p class="mat-body-2" *ngIf="statistical?.updated">
+            {{ translate.instant('import.message.update-entities', {count: statistical.updated}) }}
           </p>
-          <p class="mat-body-2" style="margin-bottom: 0.8em" *ngIf="this.statistical?.errors">
-            {{ translate.instant('import.message.error-entities', {count: this.statistical.errors}) }}
+          <p class="mat-body-2" style="margin-bottom: 0.8em" *ngIf="statistical?.errors">
+            {{ translate.instant('import.message.error-entities', {count: statistical.errors}) }}
           </p>
           <mat-expansion-panel class="advanced-logs" [expanded]="false"
-                               *ngIf="this.statistical?.errorsList?.length"
+                               *ngIf="statistical?.errorsList?.length"
                                (opened)="initEditor()">
             <mat-expansion-panel-header [collapsedHeight]="'38px'" [expandedHeight]="'38px'">
               <mat-panel-title>

ui-ngx/src/theme.scss

@@ -19,7 +19,8 @@
 @import './scss/constants';
 
 @include mat.all-component-typographies();
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 $tb-mat-indigo: (
   50: #e8eaf6,

ui-ngx/yarn.lock

@@ -376,14 +376,13 @@
   optionalDependencies:
     lmdb "3.2.6"
 
-"@angular/cdk@18.2.14":
-  version "18.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-18.2.14.tgz#6114f37a77f2f182de482da2273c70f74a6cc52d"
-  integrity sha512-vDyOh1lwjfVk9OqoroZAP8pf3xxKUvyl+TVR8nJxL4c5fOfUFkD7l94HaanqKSRwJcI2xiztuu92IVoHn8T33Q==
+"@angular/cdk@19.2.19":
+  version "19.2.19"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-19.2.19.tgz#25ba3b8f565e6bcd9cd59159c0d9a4244cf3c7ee"
+  integrity sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==
   dependencies:
-    tslib "^2.3.0"
-  optionalDependencies:
     parse5 "^7.1.2"
+    tslib "^2.3.0"
 
 "@angular/cli@19.2.19":
   version "19.2.19"
@@ -455,10 +454,10 @@
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-19.2.18.tgz#0231168a9608826334628912e91babb7945991cc"
   integrity sha512-ZUbaITv4Mq2PHIhdC20G6guUL17Zzz7aZK2+u0I7Gcpq1YQUNLYn3brKjKVADbnjDDZYboqGuhxLG2JqRwWtZw==
 
-"@angular/material@18.2.14":
-  version "18.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-18.2.14.tgz#2521916b650d16399b8d545d8f4213bc0922b5c6"
-  integrity sha512-28pxzJP49Mymt664WnCtPkKeg7kXUsQKTKGf/Kl95rNTEdTJLbnlcc8wV0rT0yQNR7kXgpfBnG7h0ETLv/iu5Q==
+"@angular/material@19.2.19":
+  version "19.2.19"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-19.2.19.tgz#dd10669e260109c4f944303dcff3d92fed2e5566"
+  integrity sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==
   dependencies:
     tslib "^2.3.0"
 
@@ -3155,12 +3154,12 @@
     rw "^1.3.3"
     tinyqueue "^3.0.0"
 
-"@mat-datetimepicker/core@~14.0.0":
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-14.0.0.tgz#1776ae74c3ff94b2bf4e1c6c01c9366c8ab876b5"
-  integrity sha512-jds4b/BPdu1Yy90y6lyucGfLxq3DKutvDLYTt4+YdSItMHu6vfkclAxllky0Qb1ANlNrFQAOdfNOCUIGTnnWag==
+"@mat-datetimepicker/core@~15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-15.0.2.tgz#ea0749b7c749dc2975c28d570a623ca3a212f05e"
+  integrity sha512-2vyKub5uCSAWoKC7UlUbNFOwHrHu9gdaK1xluMiimj8GibkxuP0uh2AP1tRsYz2514CAFvsSkD39X6qy0kz7Iw==
   dependencies:
-    tslib "^2.6.3"
+    tslib "~2.8.1"
 
 "@mdi/svg@^7.4.47":
   version "7.4.47"
@@ -11476,7 +11475,7 @@ tslib@2.6.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
 
-tslib@2.8.1, tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2, tslib@^2.6.3, tslib@^2.7.0:
+tslib@2.8.1, tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2, tslib@^2.7.0, tslib@~2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==